javascript - React.js 从组件渲染子组件

Question

我想创建一个可重用的组件，其中每次渲染组件时 DOM 结构都可以不同。假设我有这个

class Comp extends React.Component {
    constructor() {
        super()
        this.state = {
            click: null,
        }
    }
    render() {
        return(
            <div>
                {this.props.chidren}
            </div>
        )
    }
    handleButton1() {
        this.setState({click: 'button1'});
    }
    handleButton2() {
        this.setState({click: 'button2'});
    }
}
class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.handleButton1()}>Button 1</button>
        )
    }
}
class SubComp2 extends React.Component {
    render() {
        return (
            <button onClick={() => this.props.handleButton2()}>Button 2</button>
        )
    }
}
ReactDOM.render((
<Comp>
    <div id="somediv">
        <div id="andanother">
            <SubComp1 />
        </div>
    </div>
    <div id="andanotherother">
        <SubComp2 />
    </div>
</Comp>), document.getElementById('app'))

目前，这两个子组件无法访问它们各自的处理函数。将函数 handleButton1 和 handleButton2 传递给子组件的最佳方法是什么(假设它们在 DOM 中的位置是动态的，并且可能会根据页面布局而变化)。到目前为止我想到了两种解决方案:

1. 在 props.children 内进行迭代，直到找到感兴趣的元素，然后使用属性克隆它

2. 使用 ref 并在通过 componentDidMount 回调渲染主组件后以某种方式渲染子组件。

您对此有何看法？

Answer 1

这是使用React的Context的地方将是最直接的解决方案。

另一个解决方案是使用 Redux操作，但这会降低您的组件的可重用性，并与您的应用程序更紧密地耦合，您可能会或可能不关心这一点。