代码之家 › 专栏 › 技术社区 › Aseem Upadhyay

正在从this.props.children获取值

reactjs javascript

Aseem Upadhyay · 技术社区 · 6 年前

我们怎样才能从 this.props.children 。在记录了相同的输出之后,我可以看到对象的值,但它嵌套在两个级别的react类中。

React是否提供任何从该对象中选取值的抽象方法?或者我应该把它们循环起来,一个接一个地挑出来?

用例-我正在创建一个可自定义的通用表 <td> 具有自定义属性的值。我的目的是检查是否有道具 <TD & GT; 相应地更改表的行为(此行为的范围将在 CustomTable 类本身

这是我定做的桌子-

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

我就是这样打电话的

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

编辑

刚意识到,由于 <table> 结构。一个用于打字 <tbody> 其中一个代表类型 <tr> 。那么,是否有任何方法可以从这个对象中选择组件值,或者循环它是唯一的方法?

2 回复 | 直到 6 年前

Tholle 6 年前

你可以使用 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>