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应用程序之外放置按钮。当放置在里面时，它可以更新状态：

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

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

1 个答案: