使用injectIntl导出功能组件，而不使用默认的导出

Question

现在我有两个组件，List和Item。因为Item只在List中使用，所以我想把它们放在一个JSX文件中。但是，该项目必须用injectIntl包装，以启用i18n字符串的功能。

我发现如果不添加default，我就不能导出Item，而List已经默认导出，我能做的唯一方法是从另一个文件导入Item或将翻译后的字符串从List传递到Item。

我想知道为什么我不能用下面的代码，有没有更好的做法，我可以遵循，而在功能组件中使用injectIntl?

// for simplicity imports are omitted
// Item and List are written in the same file (List.jsx)
const Item = ({content, intl}) => {
return (
<>
<h1>{intl.formatMessage(content.i18nkey)}</h1>
<img src={content.imgURL} />
</>
)
}
export injectIntl(Item); // this line is reported syntax error
const List = ({contents}) => {
return (
contents.map((content) => 
<Item content={content}/>
)
)
}
export default List;

Answer 1

运行正常:

export const Item = injectIntl(
(props) => {...} 
)

不要忘记括号，即const Item = injectIntl(箭头函数)

还使用rest获取所有现有参数。并从id中删除空格，否则querySelector将不起作用。在下面的情况下，id也用作单元格中显示的标签:

export const TableCellId = injectIntl((props) => {
const { id, intl, ...rest } = props
return (
<TableCell id={removeSpaces(id)} {...rest}>
{mytanslation(intl, id)}
</TableCell>
)
})