Reactjs 访问特定儿童

假设我有这样的东西：

<Parent>
    <Child1 />
    <Child2 />
</Parent>

现在，让我们假设我希望为不同的公民提供不同的回调。那么，以下是做这件事的反应方式，还是还有别的什么

{children && children[0] && cloneElement(children[0], {onChange: onChange1})}
{children && children.length > 0 && children[1] && cloneElement(children[1], {onChange: onChange2})}

或者类似的事情：

children.map(child => child.type.name === 'Child1' ? ... : ...)

---

您可以简单地避免检查子项及其长度检查：

{children[1] && cloneElement(children[1], {onChange: onChange2})}

因为它将检查子项[1]是否返回true，然后cloneElement

如果要使用map，则可以在render return语句之外使用switch：

render() {
  let child;
  switch(children) {
    case 'Child1':
      // ...
     // return child = ...
    default: 
     // ...
   }
  return (
    <div>
    {
      child.map(el=>el)
    }
    </div>
  )
}

---

希望，这会有所帮助。

如果您想给不同的子组件提供不同的回调，那么您最好在父组件中移动子组件，如

class Parent extend React.Component{
   render() {
      <div>
          {/*other elements*/}
           <Child1 onChange={this.onChange1}/>
           <Child2 onChange={this.onChange2}/>
      </div>
   }
}

类父级扩展React.Component{
render（）{
{/*其他元素*/}
}
}

您可以在子对象上使用和映射：

const Child1=（）=>Hi'；
const Child2=（）=>“那里”；
常量父项=（{children}）=>(
{
React.Children.map（Children，（Child）=>{
console.log（'子名称为-'，child.type.name）
//归还你需要的任何东西。。。
})
}
);
常量App=（{children}）=>(
);
ReactDOM.render（，document.getElementById（'root'））

您可以使用react的children实用程序和
map
覆盖子对象
react.children.map（this.props.children，（child，index）=>{…}
并在回调中检查子对象的类型
if（child.type===“Child1”）…
是的，我只是在你写的时候检查了一下。足够好吗？是的，其他检查是多余的。那么，这是首选模式吗，因为我想把我的主要组件组织在一个地方？如果它们都需要相同的道具，你通常会克隆子元素并将道具传递给它们，如果不是，那么在t中渲染它们是理想的选择他将组件或事件处理程序向上移动是的，它也有更好的可读性。我最后就是这样做的。
return child ? ... : ...

class Parent extend React.Component{
   render() {
      <div>
          {/*other elements*/}
           <Child1 onChange={this.onChange1}/>
           <Child2 onChange={this.onChange2}/>
      </div>
   }
}