javascript - 反应无状态子组件不会更新父组件中的状态更改
问题描述
我正在构建一个小型选项卡式应用程序,其中每个选项卡呈现一个子组件。
我希望每个选项卡显示不同的内容,因此我在contentTypes
外部创建了一个对象render(){ .... }
,将每个选项卡映射到其对应的子组件。子组件通过 props 接收处理程序和状态。
class App extends Component {
state ={
contentType: "A",
title: "Overview",
searchContent: ""
}
tabHandler= (content,event)=>{
console.log("clicked");
this.setState({
title: event.target.name,
contentType: content
});
}
searchHandler = (event) => {
// this performs a search on a database and
//returns suggestions for the current input
this.setState({
searchContent: event.target.value
});
}
contentTypes = {
A: <A/>,
B: <B/>,
C: <C onchange={this.searchHandler.bind(this)} content={this.state.searchContent}/>
};
render() {
return (
<div className="row">
<ul>
<Tab click={this.tabHandler.bind(this)} id="A" name="A"/>
<Tab click={this.tabHandler.bind(this)} id="B" name="B"/>
<Tab click={this.tabHandler.bind(this)} id="C" name="C"/>
</ul>
<h1 id="title">{this.state.title}</h1>
{this.contentTypes[this.state.contentType]}
</div>
);
}
}
子组件是无状态的,定义如下:
import React from 'react'
import Field from './form-builder/field';
const C = (props) => {
return(
// Field is another stateless component with formatted <input> tags
<Field type="text" name="search" content={props.content} onchange={props.onchange}/>
);
}
export default C;
字段定义如下:
import React from 'react';
const field = (props) => {
<li className="field">
<input type="text" onChange={props.onchange} value={props.content} />
<label htmlFor={props.name}>{props.value}</label>
</li>
}
export default field;
问题是,当我从内部调用处理程序Field
以更新父组件中的状态时,(带有render(){ .... }
的那个)子组件不会更新为新状态。
有想法该怎么解决这个吗?
解决方案
您定义contentTypes
为类属性。
它实际上与以下内容相同:
class App extends Component {
constructor() {
this.contentTypes = {
A: <A />,
B: <B />,
C: <C
onchange={this.searchHandler.bind(this)}
content={this.state.searchContent}/>
}
}
}
所以在构造函数中渲染的元素永远不会得到任何道具的更新。
这是解决此问题的一种方法:
class App extends Component {
contentTypes = {
A: () => (<A/>),
B: () => (<B/>),
C: () => (
<C
onchange={this.searchHandler.bind(this)}
content={this.state.searchContent} />
)
}
// ...
render () {
const Content = this.contentTypes[this.state.contentType]
return (
<div>
{/* ... */}
<Content />
</div>
)
}
}
推荐阅读
- httpclient - c#httpclient GetStringAsync 和在 Visual Studio 上发送请求有什么区别?
- pine-script - Pine 编辑器脚本帮助
- unit-testing - 如何编写 Dart 单元测试
- kubernetes - 在范围循环内从 yaml 获取掌舵值
- java - 如何在 spring-ws 安全性上手动设置时间戳
- python - 出于某种原因,我无法将值分配给熊猫中的新列
- javascript - JS - 如何正确返回 mysql 查询值
- json - zapiex api json 代码没有运行我试过
- css - 如何防止背景图像在过渡时跳跃?
- salesforce - 文件 accountCreator.js 中 sobjectField 类型的无效引用 Account.BillingCountryCode