如何使用不同的道具渲染相同的组件

Question

I'm learning react recently.
I want to render a component with different props again but it doesn't work.

Here is the js code

// page container
class Page extends React.Component {
    constructor(props) {
        super(props);
        console.log(this.props.type);
        this.state = {
            type: this.props.type
        }
    } // end of constructor

    render() {
        return (
            <div className={this.state.type}>
            </div>
        );
    } // end of render()

} // end of componenet: page container

function show() {
    ReactDOM.render(<Page type="page1"/>, $("#main")[0]);
}

ReactDOM.render(<Page type="homepage" />, $("#main")[0]);

the html includes a button which will call the show() when clicked.
How to make it render again when I click on the button

Answer 1

React state isn't supposed to be modified from the outside. In this case there are no reasons to place a button outside React application. When it's place inside, it can update the state:

class Page extends React.Component {
    this.state = {
        type: 'homepage'
    };

    render() {
        return <>
            <div className={this.state.type}></div>
            <button onClick={() => this.setState({ type: 'page1' })}>click</button>
        <>;
    } 

}

ReactDOM.render(<Page />, $("#main")[0]);