如何在 React 中將組件定義為道具的默認值？

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>
  );
};

居住

Answer 2

不要包含<> ，只需分配它，無論它是導入的（所以在這種情況下是 Bar ）。

你需要讓 icon 屬性有一個大寫的 I，然后你可以使用<Icon />來調用傳遞給它的任何組件。

如果 Bar 有任何道具，將它們添加到 Icon，它們將被傳遞到 Bar。

import Bar from './Bar.jsx'

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

export default Foo