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

我知道当使用

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后立即中断循环。谢谢

我想知道是否有一种方法可以在达到索引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

在有多个子元素（）时只是一个数组；否则，它是传递的单个子级，或者如果没有传递子级，则为

未定义的

（我们将其转换为

null

，以便直接从

render

返回它）

然后，

返回子对象&

防止根本没有子对象的可能性

所有这些情况的示例：

类示例扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
可见性：正确
};
}
render（）{
const child=（Array.isArray（this.props.children）？this.props.children[0]：this.props.children）| null；
返回子元素&React.cloneElement(
小孩
{可见性：字符串（this.state.Visibility）}
);
}
}
const Child=props=>Visibility:{props.Visibility}；
ReactDOM.render(
,
document.getElementById（“根”）
);


我想知道是否有一种方法可以在达到索引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
在有多个子元素（）时只是一个数组；否则，它是传递的单个子级，或者如果没有传递子级，则为
未定义的
（我们将其转换为
null
，以便直接从
render
返回它）

然后，
返回子对象&
防止根本没有子对象的可能性

所有这些情况的示例：


类示例扩展了React.Component{
构造函数（…参数）{
超级（…args）；
此.state={
可见性：正确
};
}
render（）{
const child=（Array.isArray（this.props.children）？this.props.children[0]：this.props.children）| null；
返回子元素&React.cloneElement(
小孩
{可见性：字符串（this.state.Visibility）}
);
}
}
const Child=props=>Visibility:{props.Visibility}；
ReactDOM.render(
,
document.getElementById（“根”）
);
因为您只需要第一个项目，所以不需要在它们之间循环

React.Children.toArray（）
将始终为您提供一个数组，无论您有一个或多个子级，这将为您节省T.J答案中的一些检查

因此，这里有一个略短的（imo更清洁）解决方案：

  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，此选项非常有用

因为您只需要第一项，所以不需要循环遍历它们

React.Children.toArray（）
将始终为您提供一个数组，无论您有一个或多个子级，这将为您节省T.J答案中的一些检查

因此，这里有一个略短的（imo更清洁）解决方案：

  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，此选项非常有用

如果只渲染第一个子对象，那么其他子对象呢？如果只渲染第一个子对象，那么其他子对象呢？如果只有一个子对象，那么
this.props.children
是一个
对象，而不是
数组
。在这种情况下，
这个.props.children[0]
将是未定义的。最好在你的代码中检查这个案例。你能解释一下
这个.props.children[0]&&&
是做什么的吗？@PrakashSharma-真的，老天保佑我们吗？（走掉并验证）感叹多么糟糕的设计。谢谢你让我知道，修正了。@ZeroDarkThirty-这是一种“防范”根本没有孩子的可能性。当只有一个孩子时，这个.props.children
是一个
对象，而不是一个
数组
。在这种情况下，
这个.props.children[0]
将是未定义的。最好在你的代码中检查这个案例。你能解释一下
这个.props.children[0]&&&
是做什么的吗？@PrakashSharma-真的，老天保佑我们吗？（走掉并验证）感叹多么糟糕的设计。谢谢你让我知道，修正了。@ZeroDarkThirty-这是一个“防范”根本没有孩子的可能性。