React useState存储JSX组件值时如何实现内容联动更新

问题场景 #

项目基于React Flow开发，需要在组件状态中管理流节点元素。最初的实现把写死的JSX作为节点的label值存在state里，后续想要实现修改关联文本时，节点上渲染的JSX内容同步更新，尝试调整的代码无法正常运行。

初始可运行代码 #

const [el, setEl] = useState([
  {
    id: "1",
    data: {
      label: (
        <>
          <CardHeader>Card 1</CardHeader>
        </>
      )
    }
  },  
  {
    id: "2",
    data: {
      label: (
        <>
          <CardHeader>Card 2</CardHeader>
        </>
      )
    }
  }
])

return (
  <ReactFlow
    elements={el}
    onConnect={onConnect}
    onElementsRemove={onElementsRemove}
    onLoad={onLoad}
  />
)

尝试的无效修改及存在的问题 #

const [el, setEl] = useState([
  {
    id: "1",
    data: {
      title: "Test"
      label: () => {
        return (
          <>
            <CardHeader>{this.title}</CardHeader>
          </>
        )
      }
    }
  },  
  {
    id: "2",
    data: {
      title: "ID 2"
      label: () => {
        return (
          <>
            <CardHeader>{this.title}</CardHeader>
          </>
        )
      }
    }
  }
])

这段代码无法运行的核心原因有三个：

• 语法错误：data对象内的title: "Test"和label字段之间缺少逗号，直接触发JS语法解析报错
• 作用域失效：当前代码运行在函数组件环境中，不存在类组件的this绑定，函数内引用的this.title无法获取到定义的title字段值
• 逻辑错位：虽然把label改成了返回JSX的函数，但函数需要的动态数据没有通过参数或绑定关系关联到state中存储的title字段，后续修改title时，JSX内容无法感知变化、同步更新

推荐实现方案 #

不推荐把已经渲染完成的静态JSX元素存在state中——JSX本身是不可变的React元素对象，存在state里后不会因为关联字段变化自动更新。正确的做法是 state中只存储纯动态数据，渲染逻辑根据数据动态生成对应的JSX，这也是React Flow原生支持的开发模式。

实现步骤 #

1. 定义和节点绑定的自定义渲染组件，组件直接从props中读取对应的数据字段：

// 自定义节点组件，负责渲染带标题的CardHeader
function CustomCardNode(props) {
  return <CardHeader>{props.data.cardTitle}</CardHeader>
}

2. 调整state中的节点配置，移除静态JSX，只存储纯数据，同时给每个节点指定对应的自定义组件类型：

const [el, setEl] = useState([
  {
    id: "1",
    type: "customCard", // 和自定义节点类型做映射
    data: {
      cardTitle: "Card 1" // 只存储可修改的纯文本数据
    }
  },  
  {
    id: "2",
    type: "customCard",
    data: {
      cardTitle: "Card 2"
    }
  }
])

3. 在ReactFlow组件上注册自定义节点类型，把数据和渲染组件做关联（旧版ReactFlow保留elements属性用法即可，自定义节点注册逻辑一致）：

<ReactFlow
  elements={el}
  nodeTypes={{ customCard: CustomCardNode }} // 注册自定义节点
  onConnect={onConnect}
  onElementsRemove={onElementsRemove}
  onLoad={onLoad}
/>

动态更新方式 #

后续需要修改节点上的文本时，直接用setEl更新对应节点的data.cardTitle字段即可，React会自动检测状态变化，触发自定义节点组件重新渲染，实现JSX内容的同步更新，完全符合预期。
如果项目场景确实需要在state中存储JSX生成逻辑，可以把label写成接收动态参数的函数，在渲染时把最新的data值传入函数，不要依赖this获取数据。 #

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