时间戳

首页 > 解决方案 > 如何在 render() 中的 JSX 组件树中定义的组件上调用 React forceUpdate()

javascript - 如何在 render() 中的 JSX 组件树中定义的组件上调用 React forceUpdate()

问题描述

我有带有原理图代码的 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/react-getting-started/，它的外观取决于某些状态多变的。<Grid>如果更新，则自动重新渲染（例如，更新其最终的、计算的（通过 React）样式）this.props.orders。但是我有this.state.selectedOrderNo不属于的变量this.props.orders（当然，这些是 2 个不同的变量 - 道具数组和状态标量），并且 Grid 有一些样式规则取决于this.state.selectedOrderNo但这些样式规则仅在重新渲染时计算/<Grid>渲染（但是这种重新渲染不会在this.state.selectedOrderNo更改时发生，因为这些样式规则是比直接参数更深的选项<Grid>) 但我想在this.state.selectedOrderNo更改时启动网格的重新渲染。所以，这就是我试图打电话的原因grid.forceUpdate()。但问题是 -我怎样才能得到grid参考<Grid component>？

标签： javascriptreactjsdevexpress

解决方案

您需要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>  
        );
}
}

希望能帮助到你

推荐阅读