reactjs - 如何在 React 中将组件定义为 Prop 的默认值？

Question

我怎样才能在 React 中正确地做这样的事情？

import Bar from './Bar.jsx'

const Foo = ({ icon = <Bar />}) => {
  // ...
}

export default Foo

现在正在使用 icon = <Bar />将简单地给出解析错误。

Answer 1

使用大写的 Icon 属性可以将其用作组件:

const Bar = ({}) => {
  return <div>Bar</div>;
};

const Foo = ({ Icon = Bar }) => {
  return (
    <div>
      <Icon />
    </div>
  );
};

Live