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. 在通過componentDidMount回調呈現主要組件之后，使用ref和以某種方式呈現子componentDidMount 。

您對此有何想法？

Answer 1

為什么不做這樣的事情：

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 2

在這里，使用React的Context是最簡單的解決方案。

另一個解決方案是使用Redux操作，但這會使您的組件可重用性降低，並與您的應用程序緊密結合，而您可能會或可能不會在乎。

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 />

這適合您的任務嗎？