Question

我们说我有这样的事情：

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

在父母的回报中，我做了：

{children && cloneElement(children, {onChange: this.onChange})}

现在让我们说我希望不同的cihldren有不同的回调。以下是这样做的反应方式，还是有其他的东西？

{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' ? ... : ...)

Answer 1

您可以简单地避免检查儿童及其长度检查：

$ terraform apply

Error: Error asking for user input: 1 error(s) occurred:

* Cycle: aws_instance.rancher-node-02, aws_eip.rancher-node-02-eip, aws_security_group.rancher-nodes-sg, aws_instance.rancher-node-01, aws_eip.rancher-node-01-eip

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

如果你想使用map，那么你可以在render return语句之外使用switch：

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

或者，甚至:(我知道，你知道。只是为了繁荣而留在这里）

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

希望，这有帮助。

Answer 2

嗯，如果你想给不同的孩子提供不同的回调，那么你也可以在父组件中移动子组件，如

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

Answer 3

您可以使用react's children utility并映射孩子：

const Child1 = () => 'Hi ';
const Child2 = () => ' There';

const Parent = ({ children }) => (
  <div>
    {
      React.Children.map(children, (Child) => {
        console.log('The child name is - ',Child.type.name)
        // return whatever you need here...
      })
    }
  </div>
);

const App = ({ children }) => (
  <Parent>
    <Child1 />
    <Child2 />
  </Parent>
);

ReactDOM.render(<App />, 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>

访问特定的孩子

3 个答案: