反应为什么状态是通过children更新而不是通过render props更新

Question

我在通过 props 传递 React 中的文本区域的值时遇到了更新问题。我有一个模态组件，我通过文本道具传递文本区域。但是，当父组件的状态发生变化时，textarea 内容不会按预期更新。

这是我的代码示例：

<ModalWithButton
  buttonText="Show"
  text={() => (
    <textarea
      value={description ?? ''}
      onChange={(e) => handleDescriptionChange(e.target.value)}
    />
  )}
/>

当我更新描述状态时，文本区域不会使用新值重新渲染。我通过将文本区域传递给子元素而不是使用文本属性解决了这个问题，并且它有效：

<ModalWithButton
  buttonText="Show"
  buttonClassName="px-2"
  actionText="Close"
>
  <textarea
    value={description ?? ''}
    onChange={(e) => handleDescriptionChange(e.target.value)}
  />
</ModalWithButton>

问题：为什么通过 text 属性传递时 textarea 不更新，为什么通过孩子传递它可以解决问题？

备注：

• 我通过反应上下文改变状态
• 对于模态，我使用 headlessUI Transition 和 Dialog 组件

Answer 1

使用儿童代替道具

1。将文本区域作为子对象传递：

• 更改实现以直接将

  textarea

  作为子级传递

  ModalWithButton

  组件。

    <ModalWithButton buttonText="Show">
      <textarea
        value={description ?? ''}
        onChange={(e) => handleDescriptionChange(e.target.value)}
      />
    </ModalWithButton>

2。好处

• 通过将文本区域作为子对象传递，它成为
  的一部分 组件的渲染树。

• 当父组件的状态（描述）改变时，React 重新渲染模态框，文本区域反映更新后的值 动态地。