Блог

Я ищу способ обновить реакцию.Компонент, когда изменяется внутреннее состояние одного из его свойств (объекта).

Пример:

 export class ParentClass extends React.Component {

    constructor(props) {
        super(props);
        this.someObject = new SomeObject();
    }

    ...

    render() {
        return <ChildClass someObject=this.someObject />
    }
}
 

Когда я вызываю this.someObject.change() родительский класс. Как я могу сообщить дочернему классу, что он должен выполнить повторный рендеринг, поскольку внутреннее состояние SomeObject только что изменилось?

Обычно, если я обновляю примитивное значение, я полагаю, что это вызовет повторный рендеринг дочернего элемента. Однако, поскольку указатель на объект не изменился, я не верю, что дочерний класс знает, что произошло изменение.

Возможно ли ChildClass в этом случае запустить повторный рендеринг? Может быть, есть лучшее соглашение для управления этими отношениями?

Это может повлиять на производительность, но я решил эту проблему, перейдя someObject в состояние родительского объекта и установив дочернее свойство {this.state.someObject} равным .

Когда SomeObject (в данном случае roadTileMatrix ) изменяется, я клонирую объект, вношу изменения, затем устанавливаю новый объект в качестве состояния. Это, кажется, распространенный шаблон из моего чтения.

В качестве альтернативы, в качестве более легкого решения, похоже, вы могли бы вместо этого установить key значение в состоянии, которое будет меняться каждый раз, когда вносятся изменения в SomeObject, вызывая повторный рендеринг дочернего объекта.

Код здесь:

 import React from 'react'
import PropTypes from 'prop-types';

import { RoadTileMatrix, Grid } from './Grid';
import { TravelGraph } from './TravelGraph';

export class RoadNetwork extends React.Component {
    constructor(props) {
        super(props);

        const rows = this.props.rows;
        const cols = this.props.cols;

        this.state = {
            roadTileMatrix: new RoadTileMatrix(rows, cols, null)
        };

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

    addTile(r, c) {
        const rows = this.props.rows;
        const cols = this.props.cols;
        const oldArray = this.state.roadTileMatrix.innerArray;

        const newRoadTileMatrix = new RoadTileMatrix(rows, cols, oldArray);
        newRoadTileMatrix.addTile(r, c, true);

        this.setState({
            roadTileMatrix: newRoadTileMatrix,
        });
    }

    render() {
        return (
            <div>
                <Grid roadTileMatrix={this.state.roadTileMatrix} addTile={this.addTile} />
                <TravelGraph />
            </div>
        );
    };
}

RoadNetwork.propTypes = {
    rows: PropTypes.number.isRequired,
    cols: PropTypes.number.isRequired,
}