javascript - 从 this.props.children 获取值

Question

我们如何从 this.props.children 中获取值？ .记录相同的输出后，我能够看到对象的值，但它嵌套在两级 react 类中。

React 是否提供任何抽象方法来从该对象中选取值？还是我应该将它们循环并一个一个地挑选出来？

用例 - 我正在制作一个可自定义的通用表 <td>带有自定义 Prop 的值。我的目标是检查 <td> 中是否存在某些 Prop 相应地更改表的行为(此行为的范围将在 CustomTable 类本身中定义)

这是我的自定义表格 -

<CustomTable>{this.props.children}</CustomTable>

我是这样打电话的

<CustomTable>
    <thead>....</thead>
    <tbody>
        <tr>
          <td customPropEnabled={true}> xyz</td>
        </tr>
    </tbody>
</CustomTable>

编辑

刚刚意识到，由于 <table>，有两层嵌套结构。一个是类型 <tbody>一个用于类型 <tr> .那么，是否有任何方法可以从这个对象中提取组件值，或者循环遍历它是唯一的方法？

Answer 1

您可以使用 React.Children.toArray将 children 转换为数组，并递归检查是否有 td 的 customPropEnabled prop 在嵌套子项中设置为 true。

示例

const checkForCustomProp = children => {
  let childArray = React.Children.toArray(children);
  let child;
  let hasCustomProp = false;

  for (let i = 0; i < childArray.length; i++) {
    child = childArray[i];
    if (child.type === "td" && child.props.customPropEnabled) {
      return true;
    } else if (child.props && child.props.children) {
      hasCustomProp = checkForCustomProp(child.props.children);
    }
  }

  return hasCustomProp;
};

function CustomTable(props) {
  const { children } = props;
  const hasCustomProp = checkForCustomProp(children);

  return (
    <div>
      <table>{children}</table>
      {hasCustomProp && <div>Has custom prop!</div>}
    </div>
  );
}

ReactDOM.render(
  <CustomTable>
    <thead>....</thead>
    <tbody>
      <tr>
        <td customPropEnabled>xyz</td>
      </tr>
    </tbody>
  </CustomTable>,
  document.getElementById("root")
);

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

<div id="root"></div>