Как сделать один и тот же компонент с разными реквизитами

Question

Я учусь реагировать недавно.
Я хочу снова визуализировать компонент с разными реквизитами, но он не работает.

Вот код js

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

HTML содержит кнопку, которая будет вызывать шоу() при нажатии.
Как сделать так, чтобы он снова отображался при нажатии на кнопку

Answer 1

Состояние реакции не должно изменяться извне.В этом случае нет причин размещать кнопку вне приложения React.Когда он находится внутри, он может обновить состояние:

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]);