如何將自定義組件作為“屬性”傳遞給React.js渲染函數中的另一個自定義組件？

Question

我已經編寫了兩個Reactjs組件，一個是表單（MainForm），我將在其中放置多個按鈕組件（NextButton）。 當我在MainForm上定義NextButton時，我想在NextButton的handleClick事件中指定接下來要安裝的組件。

這是NextButton組件：

class NextButton extends React.Component {

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

    handleClick(event){
        ReactDOM.unmountComponentAtNode(parentElement);
        ReactDOM.render(
            this.props.next,
            parentElement
        );
    }

    render() {
        return (
            <input type="button" onClick={this.handleClick} value={this.props.value}/>
        );
    }
}

這是MainForm組件：

class MainForm extends React.Component {

    render() {
        return (
            <div id="formWrapper">
                <NextButton value="Custom Code" next= {<NextForm />} />
            </div>
        );
    }
}

在MainForm組件中，我試圖制作一個NextButton，並將單擊按鈕時要顯示的組件傳遞給它，該按鈕由NextButton handleClick函數處理。

我無法弄清楚是否有語法錯誤，還是只是使用錯誤的方法來完成此操作，任何人都可以幫忙嗎？

Answer 1

您不能以這種方式通過它。 您必須將其作為子組件傳遞。

<NextButton value="Custom Code">
   <NextForm />
</NextButton>

您可以使用this.props.children在NextButton中訪問this.props.children 。

Answer 2

您可以執行與嘗試執行的操作非常相似的操作，只需要返回有效的JSX

代碼： https ： //codesandbox.io/s/q3pxnlo9p6