[英]How to call React forceUpdate() on the component that is defined in JSX component tree in render()
I have the React component with schematic code: 我有带有原理图代码的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>
is some complex React component like https://devexpress.github.io/devextreme-reactive/react/grid/ or https://www.ag-grid.com/react-getting-started/ and its appearcance depends on some state variable. <Grid>
是一些复杂的React组件,例如https://devexpress.github.io/devextreme-reactive/react/grid/或https://www.ag-grid.com/react-getting-started/ ,其外观取决于在一些状态变量上。 <Grid>
is re-rendered automatically (eg its final, computed (by React) style is updated) if this.props.orders
is updated. 如果this.props.orders
被更新,则<Grid>
将自动重新渲染(例如,更新其最终的,通过React计算的样式)。 But I have this.state.selectedOrderNo
variable which does not belong to the this.props.orders
(of course, these are 2 different variables - array of props and scalar of state) and Grid has some styling rules that depend on this.state.selectedOrderNo
but those styling rules are computed/rendered only when the <Grid>
is rerendered (but this re-rendering does not happen when this.state.selectedOrderNo
changes, because those styling rules are some deeper options than the direct parameters of the <Grid>
) but I would like to initiate this re-rendering of the Grid when this.state.selectedOrderNo
is changed. 但是我有this.state.selectedOrderNo
变量,它不属于this.props.orders
(当然,这是2个不同的变量this.props.orders
数组和state的标量),并且Grid具有一些依赖于this.state.selectedOrderNo
样式规则。 this.state.selectedOrderNo
但仅在重新渲染<Grid>
时才计算/渲染这些样式规则(但是,当this.state.selectedOrderNo
更改时,不会进行此重新渲染,因为这些样式规则比<Grid>
),但是当this.state.selectedOrderNo
更改时,我想重新初始化Grid。 So, that is why I am trying to call grid.forceUpdate()
. 因此,这就是为什么我尝试调用grid.forceUpdate()
。 But the question is - how can I get reference grid
to the <Grid component>
? 但是问题是- 如何获得<Grid component>
参考grid
<Grid component>
?
You need to use ref
in Grid to make it work 您需要在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>
);
}
}
Hope it helps 希望能帮助到你
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.