时间戳

首页 > 解决方案 > 使用父组件将初始值传递给子组件，而不依赖于状态 ReactJS

javascript - 使用父组件将初始值传递给子组件，而不依赖于状态 ReactJS

问题描述

我有一个父组件 A，它为他的子组件 B 计算一些初始值。实际上，我计算了组件 A 的 componentDidMount() 中的初始值，并通过道具将其传递给 B：

<ComponentB initialValue={this.state.value} handleChange={this.handleChange}/>

在组件 B 我做

this.state = {value: this.props.initialValue}

此后，组件 B 应独立管理其状态。但是每次它的价值改变时，我都希望它更新 A 的状态，但信息更少。

在组件 B 中：

const onChange = (event) => { 
      this.setState({value: event.target.value + "only in B"});
      this.props.handleChange(this.state.value);
}

在组件 A 中：

const handleChange = (value) => { 
      this.setState({value: value});
}

问题是 A 总是有最后一个单词，并且 B 中的值不保留“only in b”后缀。A 在再次渲染时通过 initialValue 道具将 B 的状态值重置为他的内部状态值。

所以基本上，我想做的是在第一次渲染时从 A 继承初始值，然后在 B 发生变化时更新 A 状态而不擦除 B 的状态。

标签： javascriptreactjs

解决方案

父组件的任何更改都会触发子组件的重新渲染。我相信适合您情况的最佳方法是在从 A 继承初始值之后，为 B 组件设置一些局部状态变量以专门管理该状态，使其与 A 分开。

推荐阅读