如何将自定义组件作为“属性”传递给React.js渲染函数中的另一个自定义组件？

Question

I've written two Reactjs components, one is the form (MainForm) where I will place multiple button components (NextButton). When I define the NextButton on the MainForm, I want to specify which component to mount next in the NextButton's handleClick event.

Here is the NextButton component:

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}/>
        );
    }
}

Here is the MainForm component:

class MainForm extends React.Component {

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

In the MainForm component, I am attempting to make a NextButton and pass it the component I want to show when the button is clicked, which is handled by the NextButton handleClick function.

I am unable to figure out whether I have a syntax error, or am I just using the wrong approach to accomplish this, can anyone help?

Answer 1

You can't pass it in this way. You have to pass it in as a child component.

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

You can access NextForm inside NextButton with this.props.children .

Answer 2

You can do something very similar to what you've tried to do, you just need to return valid JSX

code: https://codesandbox.io/s/q3pxnlo9p6