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'))

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

在props.children内迭代，直到找到感兴趣的元素，然后用属性克隆它
使用ref以某种方式在主要组件通过componentDidMount回调呈现后呈现子组件。

您对此有何看法？

Answer 1

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

另一个解决方案是使用Redux操作，但这会使您的组件更少可重用，并且与您的应用程序更紧密地结合在一起，您可能会或可能不会关心它。

Answer 2

为什么不这样做：

class Comp extends React.Component {
    constructor() {
        super()
        this.state = {
            click: null,
        }
    }
    render() {
        return(
            <div>
                {this.props.chidren}
            </div>
        )
    }
    handleButton(button) {
        this.setState({click: button});
    }
}

然后在子组件中，您可以执行类似

的操作

class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.handleButton('button1')}>Button 1</button>
        )
    }
}

class SubComp2 extends React.Component {
    render() {
        return (
            <button onClick={() => this.props.handleButton('button2')}>Button 2</button>
        )
    }
}

Answer 3

可能符合您需求的一个替代选项是构建一个更高阶的组件，它用另外一些功能装饰另一个组件，下面是一个快速的示例，说明这可能对您有用，

高阶组件：

const Comp = ComposedComponent =>
  class Comp extends React.Component {
    constructor(props) {
        super(props)
        this.handleButton = this.handleButton.bind(this);
        this.state = {
            click: null,
        }
    }

    handleButton(button) {
      this.setState({click: button}); 
    }

    render() {
        return(
            <ComposedComponent
              onClick={this.handleButton}
            />
        )
    }
  }

  export default Comp;

子组件：

class SubComp1 extends React.Component {
    render() {
        return(
            <button onClick={() => this.props.onClick('button1')}>Button 1</button>
        )
    }
}

如何使用它：

const ExtendedComp = Comp(SubComp1);

<ExtendedComp />

这适合你的任务吗？

React.js从组件渲染子组件

3 个答案: