Question

我知道以下列方式使用this.props.children时向我们传递道具的方式：

React.Children.map(this.props.children, (child: any, index: number) => {
    return React.cloneElement(child, {
                Visibility: this.state.visibility,
        });
});

要将prop传递给只有第一个孩子，我可以使用索引并将cloneElement调用包装在if (index === 0)中，但这不会阻止map对所有孩子进行交互。

我想知道是否有一种方法可以在达到索引0后立即打破循环。谢谢！

Answer 1

我想知道是否有一种方法可以在达到索引0后立即打破循环。谢谢！

根本不要使用map，那么，如果你只想要第一个孩子。

const child = (Array.isArray(this.props.children) ? this.props.children[0] : this.props.children) || null;
return child && React.cloneElement(
    child,
    {Visibility: this.state.visibility }
);

第一点：

const child = (Array.isArray(this.props.children) ? this.props.children[0] : this.props.children) || null;

...防止this.props.children只有多个孩子的数组（details）;否则，这是单身孩子通过，或undefined如果没有孩子通过（我们转换为null，所以我们可以直接从render返回。）

然后return child &&警卫就没有孩子了。

所有这些情况的示例：

class Example extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      visibility: true
    };
  }
  render() {
    const child = (Array.isArray(this.props.children) ? this.props.children[0] : this.props.children) || null;
    return child && React.cloneElement(
        child,
        {Visibility: String(this.state.visibility) }
    );
  }
}

const Child = props => <div>Visibility: {props.Visibility}</div>;

ReactDOM.render(
  <div>
    <Example />
    <Example><Child/></Example>
    <Example><Child/><Child/></Example>
  </div>,
  document.getElementById("root")
);

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

Answer 2

由于您只需要第一项，因此无需循环使用它们。

React.Children.toArray()将始终为您提供一个数组，无论您是否有一个或多个孩子，这样可以省去T.J答案中的一些检查。

所以这是一个稍短（并且更清洁）的解决方案：

  const child = React.Children.toArray(children)[0];
  if (child) {
    return React.cloneElement(child, {Visibility: this.state.visibility});
  }
  return null;

React.Children.toArray(children)

将子不透明数据结构作为平面数组返回，并为每个子项分配键。如果你想在渲染方法中操作子集合，这很有用，特别是如果你想在传递它之前重新排序或切割this.props.children。

使用this.props.children将道具传递给第一个孩子

2 个答案: