我有一个父组件和一个子组件。在父组件中,我定义了作为道具传递给我的子组件的状态。我还在子组件的道具中传递了函数“ onUpdateQuestion”。每当子项的输入字段的值更改(因此将发生重新渲染)时,将执行此功能。
export default class Parent extends React.PureComponent<{},{question:Question}> {
public state = {
question: new Question()
};
public onUpdateQuestion = (): void => {
let _question = this.state.question;
this.setState({ question: _question });
};
public render(): React.ReactNode {
return (
<QuestionEditorChild
question={this.state.question}
onUpdateQuestion={this.onUpdateQuestion}/>);
}
}
class QuestionEditorChild extends React.Component<{question: Question; onUpdateQuestion: Function;}> {
render() {
console.log(this.props.question.description);
return (
<div>
<h2>Question</h2>
<input
value={this.props.question.description}
onChange={e => {
this.props.question.setDescription(e.target.value);
this.props.onUpdateQuestion();
}}
/>
</div>
);
}
}
class Question implements IQuestion {
public description: string;
constructor(question?: IQuestion) {}
public setDescription(value: string): void {
this.description = value;
}
}
interface IQuestion {
description: string;
}
我的子组件再也不会重新渲染。这是否与我在子组件中执行的setDescription()函数有关?
在使用模型/界面时正确重新渲染孩子的最佳实践是什么?
答案 0 :(得分:0)
public onUpdateQuestion = (): void => {
let _question = this.state.question;
this.setState({ question: _question });
};
上面的代码实际上并没有使用您表单中的任何新数据。
应该是...
onUpdateQuestion = (incomingData) => {
this.setState({ question: incomingData })
}
因此从技术上讲,您的代码(从不更新)是正确的,因为它始终使用新的Question()
,该文件创建一次,然后就永远不会更改。