React Material UI 图标传入 props --> 到 jsx (Typescript)

Question

我在 React 环境中使用材质 UI 库中的图标。 我将此图标作为属性传递给子反应元素，我想在此子元素中呈现它。

因此，如果通常您只需要：

import DeleteIcon from '@material-ui/icons/Delete';

...

render(
       <DeleteIcon/>
)

现在我把它作为子元素中的一个属性，这是我的孩子的代码：

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

    return (
        {props.Icon}  ------> not rendered!
    )

如何将此 ovverrideableComponent “转换”为可接受的 ReactElement？

Answer 1

确保以正确的方式传递道具： Icon={<DeleteIcon />} ，正如您在 InteractiveListItem 组件中指定的那样。