子组件可以访问其包含组件的方法吗？

Question

我见过与此类似的问题，但他们通常是在谈论父组件访问子组件的方法或通过 props 传入方法。我的问题是针对特定情况，使用props.children，并且让任何子组件都能够调用正在呈现props.children 的父组件上的方法。

我试图实现的简化示例：

class WrapperComponent extends React.Component {

constructor(props){
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this)
}

handleInputChange(e){
    console.log("neat, you changed the input")
}

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

以及调用所述组件并将子组件作为道具传递的组件。

const Component = (props) => {
return(
    <WrapperComponent>
        <div className="form-group" >
            <label>
                <div>Text</div>
                <input onChange={this.handleInputChange} type={"text"}/>
            </label>
        </div>
    </WrapperComponent>
)
}

我的想法是我可以渲染一个包含某些逻辑的组件，并将元素作为子元素传递给该组件以供渲染，而且props.children 然后可以在包装器中调用所述逻辑，所以我可以通过在不同用例中的不同子级中，但处理方式始终相同。有没有办法做到这一点？

Answer 1

您可以使用一些内置的 React 好东西克隆您的元素并向它们添加新的道具：

class WrapperComponent extends React.Component {

constructor(props){
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this)
}

handleInputChange(e){
    console.log("neat, you changed the input")
}

render() {
    return (
        <form>
            {React.Children.map(
                this.props.children, 
                el => React.cloneElement(el, {onInputChange: this.handleInputChange})
            )}
        </form>
    )
  }
}

然后（移除 WrapperComponent）：

const Component = (props) => {
  return(
        <div className="form-group" >
            <label>
                <div>Text</div>
                <input onChange={props.onInputChange} type={"text"}/>
            </label>
        </div>
  )
}

然后：

ReactDOM.render(
    <WrapperComponent><Component /></WrapperComponent>,
    document.getElementById('root')
)

Answer 2

是的，有一种方法，但它并不简单，您可能需要考虑另一种方法。

为了让子组件能够访问任意父组件的方法，父组件必须覆盖子组件的 props。这可以使用父级的render() 函数中的React.cloneElement 来完成。在您的示例中：

class WrapperComponent extends React.Component {

constructor(props){
    super(props);
    this.handleInputChange = this.handleInputChange.bind(this)
}

handleInputChange(e){
    console.log("neat, you changed the input")
}

render() {
    return (
        <form>
            {React.Children.map(this.props.children, child => (
                React.cloneElement(child, {handleInputChange: this.handleInputChange}
            )}
        </form>
    )
  }
}

然后，您可以通过this.props.handleInputChange 访问child 中的方法。