javascript - 将组件作为 props 传递的更好方法是什么？

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

codesandbox https://codesandbox.io/s/hungry-violet-jlvsp

Answer 1

我只是将其渲染为子组件

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