Как вызвать React forceUpdate () для компонента, определенного в дереве компонентов JSX в render ()

Question

У меня есть компонент React с кодом схемы:

class OrderList extends Component {
    constructor() {
        super();
        this.handleUpdate = this.handleUpdate.bind(this);
    }

    handleChange(event) {
        //>>POI how to get reference to the Grid, that is defined in the component tree?
        //grid.forceUpdate();
    }


    render() {
        return (
            <div>
                <Grid data={this.props.orders}>
                <button onClick={this.handleUpdate}>Update</button>
            </div>  
            );
    }
}

<Grid> - это какой-то сложный компонент React, такой как https://devexpress.github.io/devextreme-reactive/react/grid/ или https://www.ag -grid.com / реаги-Getting-Start / и его появление зависит от некоторой переменной состояния.<Grid> перерисовывается автоматически (например, обновляется его окончательный, вычисленный (по React) стиль), если this.props.orders обновляется.Но у меня есть переменная this.state.selectedOrderNo, которая не принадлежит this.props.orders (конечно, это две разные переменные - массив реквизитов и скаляр состояния), и в Grid есть некоторые правила стиля, которые зависят от this.state.selectedOrderNo, но эти правила стилявычисляются / отображаются только при повторном рендеринге <Grid> (но этот повторный рендеринг не происходит при изменении this.state.selectedOrderNo, потому что эти правила стилевого оформления являются более глубокими, чем прямые параметры <Grid>), но я бы хотелинициировать этот повторный рендеринг сетки при изменении this.state.selectedOrderNo.Вот почему я пытаюсь позвонить grid.forceUpdate().Но вопрос - как мне получить ссылку grid на <Grid component>?

Answer 1

Вам нужно использовать ref в Grid, чтобы он работал

class OrderList extends Component {
constructor() {
    super();
    this.handleUpdate = this.handleUpdate.bind(this);
}

handleChange(event) {
    //>>POI how to get reference to the Grid, that is defined in the component tree?
    //grid.forceUpdate();
    this.grid.forceUpdate();
}


render() {
    return (
        <div>
            <Grid ref={ref=>this.grid=ref} data={this.props.orders}>
            <button onClick={this.handleUpdate}>Update</button>
        </div>  
        );
}
}

Надеюсь, это поможет