ReactJS中存储在state内的JSX元素未随关联状态更新如何解决

你将JSX元素直接存储在state中时，React会将该JSX编译为静态的元素对象，其className属性是生成该元素那一刻this.state.cClass的固定快照。后续单独更新cClass状态时，已存储在state中的旧元素对象不会自动重新计算属性，因此不会同步更新。

方案1（最推荐）：不在state中存储JSX，改为在render阶段动态生成 #

state仅存储渲染所需的原始数据/配置项，渲染逻辑统一放在render方法中，状态变更后render会自动重新执行，生成携带最新属性的元素。

// state仅保留原始参数
state = {
  cClass: 'init-class',
  // 若content结构可动态切换，可额外存储结构标识、配置参数等
  contentConfig: { type: 'div', text: '' }
}

render() {
  // 动态生成content，自动关联最新的cClass
  const content = <div className={this.state.cClass} />
  return (
    <div>
      {/* 其他页面结构 */}
      {content}
    </div>
  )
}

该方案符合React的单向数据流设计，维护成本最低。

方案2：state中存储渲染函数而非静态JSX #

如果确实需要将渲染逻辑存在state中，可以改为存储返回JSX的函数，调用时传入最新状态即可拿到最新元素。

// 存储渲染函数
this.setState({
  renderContent: (cClass) => <div className={cClass} />
})

render() {
  // 调用函数传入最新的cClass
  return <div>{this.state.renderContent(this.state.cClass)}</div>
}

方案3（不推荐）：更新cClass时同步重生成content #

如果一定要保留将JSX存在state中的写法，需要每次更新cClass时同时重新生成content覆盖原state值：

// 封装更新方法同步修改两个关联状态
updateCClass = (newClass) => {
  this.setState({
    cClass: newClass,
    content: <div className={newClass} />
  })
}

该方案需要手动维护两个状态的同步，后续逻辑迭代时容易出现遗漏，仅适合临时快速修复场景。

内容的提问来源于stack exchange，提问作者yavarSt