將組件作為道具傳遞的更好方法是什么？

Question

在 props 中傳遞組件的更好方法是什么？ 以及如何更好地將其稱為組件或函數。 還是沒有區別？

const HeaderComponet = props => {
  return <div style={styles.header}>Header</div>;
};

const renderCardBody = props => {
  return <div style={styles.body}>Body</div>;
};

function App() {
  return (
    <Card HeaderComponet={HeaderComponet} renderCardBody={renderCardBody} />
  );
}

const Card = props => {
  const { HeaderComponet, renderCardBody } = props;
  return (
    <div>
      <p>Card</p>
      {HeaderComponet && <HeaderComponet {...props} />}
      {renderCardBody && renderCardBody(props)}
    </div>
  );
};

代碼和盒子https://codesandbox.io/s/hungry-violet-jlvsp

Answer 1

我會簡單地將它呈現為子組件

<Card>
  <HeaderComponent {...props}/>
  <RenderCardBody {...props}/>
</Card>

Answer 2

如何更好地將其稱為組件或函數

理論上，兩者是一樣的。 我們編寫的 JSX 被轉換為基於函數的 JS 並以這種方式使用。

樣本：

• 用作函數的類組件
• 函數組件作為組件

那么使用哪個？

• 功能：如果涉及處理。 說基於 1 個狀態，它應該顯示橫幅。 另一方面，一種形式。 是的，邏輯可以移動到另一個組件中使用，但是，如果組件需要智能並根據狀態進行處理，則應在函數中完成此類處理
• 組件：如果它直接消耗。 就像一個表單組件包裝多個組件以創建一個結構。

---

在 props 中傳遞組件的更好方法是什么？

在我的 POV 中，您不應將組件作為道具傳遞。 一個組件應該知道它消耗了什么。 盡管如此，如果您想擁有動態組件，我會按照以下方式進行。

• 創建可以使用的可能組件列表，並基於該列表創建地圖。
• 創建 props getter 函數，以便您可以動態使用它。
• 現在基於props，獲取組件和props，並進行渲染。

---

樣本：

在 props 中傳遞組件的更好方法是什么？

注意： Tile 組件僅用於演示，因此它們非常基礎。 實際上，它們可能更復雜

 const DefaultTile = (props) => Array.from({ length: props.count }, (_, i) => <div className='tile medium-tile' key={i}>Tile</div>) const LargeTile = (props) => Array.from({ length: props.count }, (_, i) => <div className='tile large-tile' key={i}>Tile</div>) const SmallTile = (props) => Array.from({ length: props.count }, (_, i) => <div className='tile small-tile' key={i}>Tile</div>) const componentMap = { large: LargeTile, medium: DefaultTile, small: SmallTile } const renderPropMap = { large: (props) => ({ count: props.count, showExtraInfo: props.info }), medium: (props) => ({ count: props.count }), small: (props) => ({ count: props.count, onHover: props.onHover }) } const App = (props) => { const Comp = componentMap[props.size]; const childProps = renderPropMap[props.size](props) return <Comp { ...childProps } /> } ReactDOM.render(<App size='medium' />, document.querySelector("#app"))

 .tile { border: 1px solid gray; display: inline-block; margin: 4px; } .small-tile { width: 50px; height: 50px; } .medium-tile { width: 100px; height: 100px; } .large-tile { width: 200px; height: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="app"></div>