REACTJS JSX 重新渲染答案

【问题标题】：REACTJS JSX re renderREACTJS JSX 重新渲染
【发布时间】：2021-10-10 06:53:53
【问题描述】：

我想在 App.js 中重新渲染 html 由点击事件触发的内容。
在第一次加载 JSX 组件时，<WaypointList waypoint_is_done={false} App={this}/> 被渲染。
但是当我单击按钮时，它不会再次呈现 JSX 组件 <WaypointList waypoint_is_done={true} App={this}/>。

class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            content: this.index()//LETS LOAD CONTENT
        };

        this.index = this.index.bind(this);
        this.toggleDoneList = this.toggleDoneList.bind(this);
    };

    index() {

        return <WaypointList waypoint_is_done={false} App={this}/>;
    };
    //SET NEW RENDERER ONCLICK
    toggleDoneList(){

        console.log('click');
        this.setState({
            content: <WaypointList waypoint_is_done={true} App={this}/>
            //content: <div>see</div>
        });
    };

    render() {
        console.log(this.state.content);
        return this.state.content;
    };
}

ReactDOM.render(
    <App/>,
    document.getElementById('app')
);

第一次触发 WaypointList 类，但是当我单击“对象完成列表”按钮时，则不是

它调用 App.toggleDoneList 并且 App.render 也被触发，它得到正确的 JSX 组件但不会再次触发 WaypointList 类

class WaypointList extends React.Component {

    constructor(props) {

        super(props);
        this.App = props.App;
        this.state = {
            content: this.index(props)
        };

        this.index = this.index.bind(this);
    };

    index(props) {

        let rows = logistic_route_sheet_waypoint_rows;

        if (rows.length > 0) {

            return (
                <div className="map-listing">
                    <div className="object-done-listing noselect btn btn-success"
                         onClick={() => this.App.toggleDoneList()}>
                        <i className="fa fa-list" aria-hidden="true"></i>
                    </div>
                </div>
            );
        }
        return (null);
    };

    render() {

        return this.state.content;
    };
}

如果我设置它会起作用

this.setState({
    content: <div>see</div>
});

但没有

this.setState({
    content: <WaypointList waypoint_is_done={true} App={this}/>
});

有什么问题？

【问题讨论】：

标签： reactjs render

【解决方案1】：

我找到了重新渲染类的解决方案

我制作了“CustomEvent”“reRenderer”，并在 react 之外调用了 re_renderer 函数。

【讨论】：