如何使用 HOC 在 React 中仅渲染具有特定道具的孩子答案

【问题标题】：How to only render children that have a certain prop in React with a HOC如何使用 HOC 在 React 中仅渲染具有特定道具的孩子
【发布时间】：2019-05-14 00:42:45
【问题描述】：

我正在创建一个 HOC，它将在某个道具上检查其孩子（和他们的孩子），在本例中为 onEditable。如果没有指定，则假定要显示孩子，如果设置为hide，则不会呈现孩子。

（该道具不是布尔值，因为稍后我会添加更多选项）

const MyComponent = ({ children, }) => {
  const getChildren = (myChildren, onEditable = 'show') => React.Children.map(myChildren, (child) => {
    let myOnEditable = onEditable;
    const { props, } = child;
    if (props) {
      const { onEditable: onEdit, children: grandChildren, } = props;
      onEdit && (myOnEditable = onEdit);
      typeof grandChildren === 'object'
          && getChildren(grandChildren, myOnEditable);
    }
    console.log(myOnEditable);
    if (myOnEditable === 'show') {
      return child;
    }
  });
  return <div>{getChildren(children)}</div>;
};

ReactDOM.render(
    <MyComponent>
      <p onEditable="show">show</p>
      Unspecified
      <div onEditable="hide">
        <span onEditable="show">show inside hide</span>
        <p>Unspecified in hide</p>
      </div>
      <div onEditable="show">
        <span onEditable="hide">hide inside show</span>
        <p>Unspecified in show</p>
      </div>
    </MyComponent>,
    document.getElementById('root')
  );

<div id='root'/>
<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>

以级联方式分配正确的onEditable 值是可行的，正如在控制台中看到的那样，但仅渲染show 则不行。遵循代码时哪种有意义。问题是；我不知道如何解决。

对我来说最难理解的事情是能够渲染一个父组件，它的onEditable 设置为hide，而它的一个子组件设置为show。

这可能听起来令人困惑，所以我会解释更多。 onEditable 设置为 hide 的父组件将此属性级联到它的子级（以我想要我的 HOC 的方式），但如果孩子或孙子有这个道具设置显示，他所有的父母都需要渲染也是，但不是他的兄弟姐妹（因为他们仍然拥有父母的 hide 属性，除非另有说明）

所以我希望在我的示例中使用以下 DOM 结构：

<p onEditable="show">show</p>
Unspecified
<div onEditable="hide">
  <span onEditable="show">show inside hide</span>
</div>
<div onEditable="show">
  <p>Unspecified in show</p>
</div>

【问题讨论】：

标签： javascript reactjs ecmascript-6

【解决方案1】：

“如果它被设置为隐藏它不会渲染孩子。”

如果孩子不应该渲染，你不应该把它传进去。

您还应该告诉 MyComponent 它是否应该显示，无论它是子组件，即您应该通过预先计算值将 onEditable 传递给 MyComponent，而不是将相同的信息传递给子组件并备份到父母。

这被称为“提升状态”，它符合快速失败和提前返回设计模式/最佳实践，以及 React 所依赖（并试图强制执行）的确定性单向数据流。

嗯，React 是自上而下工作的，父母实际上为孩子指定了 props。我 99% 确定你的一切都倒退了，你应该告诉孩子 isVisible={true} 或 isVisible={false}，这取决于 this.props.isEditable。（或添加类名/实际上不渲染它们）。

子级配置父级的唯一方法是通过回调或通过像 redux 这样的全局状态管理器，它将 props 注入回父级。

如果您的孩子神奇地获取有关是否应该渲染的信息，那么它应该调用this.props.onMagicallyGotSomeInformation。否则，状态应该存在于知道此信息的最近的父级中，并且应该在必要时传递/使用。

另一个批评是短路运算符和您使用的语法会给您带来比其价值更大的痛苦。使用const、if 语句和花括号块 :) 从长远来看，这将使您的生活更轻松。

HOC 是一个流行语，它只是一个中间层来决定哪些道具应该被消费或转发给孩子，我一般会使用cloneElement 来定制孩子。孩子不应该有这样的信息，如果他们有，你应该通过回调来获取信息。

【讨论】：