javascript - React - 组件导出多个组件

Question

我有一个接收页眉、主页脚和页脚的组件。 (页眉和页脚可选)

const View = (props) => {
  const { header, main, footer } = props;
  return (
   <div>
     {header && <header>{header}</header>}
     <main>{main}</main>
     {footer && <footer>{footer}</footer>}
  </div>
  );
};


 ReactDOM.render(
    <View header={<p>content header</p>} main={<p>content main</p>} footer={<p>content footer</p>} />,
    document.body
  );

<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>

但我不想通过 props 传递 jsx。我想做这样的事情。

我该怎么做？

const View = (props) => {
  const { children } = props;
  return (
   <div>
   {children}
  </div>
  );
};


 ReactDOM.render(
    <View>
      <View.Header>
        <p>content header</p>
      </View.Header>
      <View.Main>
        <p>content main</p>
      </View.Main>
      <View.Footer>
        <p>content footer</p>
      </View.Footer>
    </View>
    ,
    document.body
  );

<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>

Answer 1

您似乎想要创建一个 compound component FullView 组件的。声明 Header、Main 和 Footer 组件，然后将它们作为属性添加到 FullView 组件上。

// FullView.js
const FullView = ({ children }) => <div>{children}</div>;

const Header = ({ children }) => <div>{children}</div>;
const Main = ({ children }) => <div>{children}</div>;
const Footer = ({ children }) => <div>{children}</div>;

FullView.Header = Header;
FullView.Main = Main;
FullView.Footer = Footer;

// export default FullView;

// index.js
ReactDOM.render(
  <FullView>
    <FullView.Header>
      <p>content header</p>
    </FullView.Header>
    <FullView.Main>
      <p>content main</p>
    </FullView.Main>
    <FullView.Footer>
      <p>content footer</p>
    </FullView.Footer>
  </FullView>,
  document.body
 );

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