基于類的應用程式在這里。
MainComponent.js
export class MainComponent extends Component {
constructor(props) {
super(props);
this.state = {
name: '',
nr: 0
}
}
btnClicked(e, nr, name){
this.setState({name: name});
this.setState({nr: nr});
}
render() {
return (
<div>
<div>
<button className="btn btn-success" onClick={e => this.btnClicked(e, '1', 'one')}>UNO</button>
<button className="btn btn-success" onClick={e => this.btnClicked(e, '2', 'two')}>DUE</button>
<button className="btn btn-success" onClick={e => this.btnClicked(e, '1', 'three')}>TRE</button>
</div>
<div>
{this.state.nr === '1' && <Child1 name={this.state.name}/>}
{this.state.nr === '2' && <Child2 name={this.state.name}/>}
</div>
</div>
)
}
}
export default MainComponent;
然后是 2 個子組件：
Child1.js
export class Child1 extends Component {
constructor(props) {
super(props);
this.state = {
name: props.name,
}
}
render() {
return (
<div>
<div>
{
this.state.name !== '' &&
<h3>{this.state.name}</h3>
}
</div>
</div>
)
}
}
export default Child1;
Child2.js
export class Child2 extends Component {
constructor(props) {
super(props);
this.state = {
name: props.name,
}
}
render() {
return (
<div>
<div>
{
this.state.name !== '' &&
<h3>{this.state.name}</h3>
}
</div>
</div>
)
}
}
export default Child2;
當我單擊按鈕“一個”時，我看到文本“一個”。但是當點擊按鈕“三”時，我仍然看到相同的文本“一”。我嘗試添加 forceUpdate 但沒有幫助：
btnClicked(e, nr, name){
this.forceUpdate(function(){
this.setState({name: name});
this.setState({nr: nr});
});
}
如何指示應用在每次點擊時重新呈現子組件？
uj5u.com熱心網友回復：
在這種情況下，您不應將 Child components 屬性值分配給 state。只需在組件中使用 prop 值即可。
export class Child1 extends Component {
render() {
return (
<div>
<div>
{
this.props.name !== '' &&
<h3>{this.props.name}</h3>
}
</div>
</div>
)
}
}
export default Child1;
每次 props 更新時都不會呼叫 Child 組件的建構式。因此，更新道具時不會更新狀態。
在這種情況下 - 在大多數情況下 - 您不需要forceUpdate.
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/444606.html
標籤：反应