Question

让我们说我嵌套了多个反应组件，但是我想清楚地说明组件是如何嵌套的，而不需要开发人员遍历整个组件层次结构。

所以不要这样做：

<Header logo=logoComponent nav=navComponent />

我可以这样做：

import React from 'react';
import styles from "./index.css";

export default React.createClass({
  // Get component by key
  getComponent(key) {
     return this.props.children.filter( (comp) => {
             return comp.key === key;
     });
  }

  render: function() {
    return (
      <header className={styles.root}>
        <div className={styles.logo}>
          {this.getComponent('logo')}
        </div>
        <div className={styles.nav}>
         {this.getComponent('navbar'}
        </div>
      </header>
    );
  }
});

然后可以这样使用：

export default React.createClass({
  render: function() {
    return (
      <Header>
        <Logo key="logo"/>
        <Navbar key="navbar"/>
      </Header>
    );
  }
});

显然这个解决方案有点习惯。但它确实让开发人员能够立即了解组件的嵌套方式，例如HTML。

如果我以这种方式使用它，我是否误解了如何最好地使用它？有没有更好的方法来实现相同类型的嵌套？或者只是将多个子组件作为属性传递？

Answer 1

当你需要将孩子分成多个区域时，我在这种情况下看到的是导出一些＆＃34;包装＆＃34;来自主要组件的组件 - 例如HeaderLogo和HeaderNavbar，然后使用类似

<Header>
  <HeaderLogo ... />
  <HeaderNavbar ... />
</Header>

我不会选择refs，因为这些看起来太脆弱了，但是班级检查或者其他任何东西都会更少侵入性并且更多地封装在最终用户身上 - 或者甚至没有＆＃34;发现＆＃34;正确的，只是渲染所有的孩子。

组件可以签订非正式合同，其直接子项只能是这些＆＃34;包装器＆＃34;组件。

以这种方式嵌套多个反应组分可以被认为是反模式吗？

1 个答案: