Блог

Я хочу повторно отобразить html в App.js что инициируется событием щелчка мыши.
При первой загрузке отображается компонент 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, но когда я нажимаю кнопку «объект-готово-список», то нет

Он вызывает приложение.toggleDoneList, и приложение.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}/>
});
 

В чем проблема ?

Я нашел решение для повторного отображения класса

я сделал «CustomEvent» «reRenderer» и вызываю функцию re_renderer вне react.