在道具中传递的 React Material UI 图标 --> 到 jsx(打字稿)

Question

我使用了React环境中材质UI库中的图标。我把这个图标作为属性传递给child react元素，我想在这个子元素中渲染它。

一般来说你只需要:

import DeleteIcon from '@material-ui/icons/Delete';
...
render(
<DeleteIcon/>
)

现在我把它作为子元素的属性，这是我的子元素代码:

export const InteractiveListItem: React.FC<{ Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> }> = (props) => {
return (
{props.Icon}  ------> not rendered!
)

如何"转换"?将这个可重写的组件转换为可接受的ReactElement?

Answer 1

确保你以正确的方式传递props:Icon={<DeleteIcon />}，就像你在InteractiveListItem组件中指定的那样。