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

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/react-getting-started/，其外观取决于某些状态变量。如果 <Grid> 更新，this.props.orders 会自动重新渲染(例如，更新其最终的计算(由 React)样式)。但我有 this.state.selectedOrderNo 变量，它不属于 this.props.orders (当然，这是两个不同的变量 - Prop 数组和状态标量)并且 Grid 有一些依赖于 this.state.selectedOrderNo 的样式规则，但这些样式规则仅在以下情况下计算/渲染<Grid> 被重新渲染(但是当 this.state.selectedOrderNo 更改时，不会发生这种重新渲染，因为这些样式规则是比 <Grid> 的直接参数更深的选项)，但我想在 this.state.selectedOrderNo 更改时启动网格的重新渲染。所以，这就是我尝试调用 grid.forceUpdate() 的原因。但问题是 - 如何获得 grid 到 <Grid component> 的引用？

Answer 1

您需要在 Grid 中使用 ref 才能使其正常工作

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>  
        );
}
}

希望对你有帮助