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

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 包含一個按鈕，單擊時將調用 show()。
單擊按鈕時如何使其再次呈現

Answer 1

不應從外部修改 React 狀態。 在這種情況下，沒有理由在 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]);