Question

我了解将一种方法作为道具从父级传递到子级组件。由于某些原因，我很难将精力集中在通过props.children访问子组件方法上。

希望我的伪代码会有用。

// ParentComponent
...
<ChildComponent>
  <button onClick={myMethod}></button>
</ChildComponent>
...


// ChildComponent
...
myMethod() {
  dosomething...
}

render() {
  return (
    <div>
      {this.props.children}
    </div>
  )
}
...

因此在此示例中，我想通过传递给React子代的按钮访问“ myMethod”。在我的现实世界问题中，该按钮最初位于childComponent的render方法中，但我希望获得更大的灵活性。我认为可以通过引用来完成，但是我不认为这是最好的方法，或者如果我正在做的事情是正确的解决方法。非常感谢！

Answer 1

没有任何好的方法可以做到这一点。您可以使用类似这样的东西。但是，如果您在这里传递一个以上的孩子，所有的孩子都会响应这个点击处理程序！因此，您应该考虑使用此Button的另一种逻辑。在这种状态下，您的ChildrenComponent非常普通。

那么，您的Button组件会做什么？您可以使用此单击处理程序创建一个组件，所有其他部分都可以作为道具传递。也许通过这种方式，您可以在多个地方使用它。

const App = () => (
  <div>
    <ChildComponent>
      <button>Click</button>
    </ChildComponent>
  </div>
);

const ChildComponent = ( props ) => {
  const handleClick = () => console.log( "clicked" );
  return (
    <div>
      { React.cloneElement( props.children, { onClick: handleClick } ) }
    </div>
  );
};

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>

在React子项中添加一个点击处理程序，以在子项组件上实现方法

1 个答案: