Javascript 可以将DOM引用存储到状态挂钩中吗？

我有以下代码：

Groups.js

const Groups = ({ groups }) => {
  const [groupFilter, setGroupFilter] = useState(null)
  return <>
    <div ref={node => setGroupFilter(node)}/>
    <h1>My title</h1>
    <DataList
      data={groups}
      renderFilter={filter => groupFilter && createPortal(
        <div>
          {filter}
          <div>Filter 3</div>
        </div>,
        groupFilter
      )}
    />
  </>
}

const DataList = ({ data, renderFilter }) => {
  return <>
    {renderFilter(<>
      <div>Filter 1</div>
      <div>Filter 2</div>
    </>)}
    data.map(element =>
      <div key={element.id}>{element.name}</div>
    )
  </>
}

constgroups=（{Groups}）=>{
常量[groupFilter，setGroupFilter]=useState（null）
返回
setGroupFilter（节点）}/>
我的头衔
groupFilter&createPortal(
{filter}
过滤器3
,
组过滤器
)}
/>
}

DataList.js

const Groups = ({ groups }) => {
  const [groupFilter, setGroupFilter] = useState(null)
  return <>
    <div ref={node => setGroupFilter(node)}/>
    <h1>My title</h1>
    <DataList
      data={groups}
      renderFilter={filter => groupFilter && createPortal(
        <div>
          {filter}
          <div>Filter 3</div>
        </div>,
        groupFilter
      )}
    />
  </>
}

const DataList = ({ data, renderFilter }) => {
  return <>
    {renderFilter(<>
      <div>Filter 1</div>
      <div>Filter 2</div>
    </>)}
    data.map(element =>
      <div key={element.id}>{element.name}</div>
    )
  </>
}

constdatalist=（{data，renderFilter}）=>{
返回
{renderFilter(
过滤器1
过滤器2
)}
data.map（元素=>
{element.name}
)
}

基本上，

DataList

用于呈现一组列表过滤器和数据列表本身<代码>渲染过滤器告诉组件如何渲染过滤器。从

组中

我想使用此渲染功能使用门户渲染

数据列表之外的过滤器

我第一次尝试使用
useRef
，但没有成功，因为它在设置时不会触发重新加载。像我这样用国家挂钩安全吗

谢谢。
mmm per docs：“门户提供了一种一流的方法，可以将子节点呈现到父组件的DOM层次结构之外的DOM节点中。”。但我在您的代码中看到，中的div已经开始反应，因此，我不确定您在这里试图实现什么。@JohnnyZabala Well
DataList
被设计为通用组件。“正常”行为是在
DataList
内的数据列表顶部呈现过滤器。但是在某些特定的情况下，比如在
组中
，我需要在
数据列表
之外呈现过滤器，因此我需要一种在其他地方呈现过滤器的方法，并使用门户进行呈现。但是我的主要问题是关于
ref
和
useState
的组合。考虑到你的问题，我认为它是安全的，我不推荐它，因为这不是一件标准的事情（这是我第一次看到有人将ref存储在state中），但除此之外，它是安全的，并且不会因此而做出反应。我问您试图实现什么，因为我认为有更好的方法。您将如何实现？例如，我看到这将涵盖您现在拥有的所有用例：。但这不是唯一的解决办法，也不是最好的办法。您可以尝试进行更多的实验，以获得满足此用例甚至未来用例的设计。例如，如何更改默认过滤器的顺序？您可以通过组件和组合完成很多工作。祝你好运：Dmmm per docs：“门户提供了一种一流的方法，可以将子节点呈现到父组件的DOM层次结构之外的DOM节点中。”。但我在您的代码中看到，中的div已经开始反应，因此，我不确定您在这里试图实现什么。@JohnnyZabala Well
DataList
被设计为通用组件。“正常”行为是在
DataList
内的数据列表顶部呈现过滤器。但是在某些特定的情况下，比如在
组中
，我需要在
数据列表
之外呈现过滤器，因此我需要一种在其他地方呈现过滤器的方法，并使用门户进行呈现。但是我的主要问题是关于
ref
和
useState
的组合。考虑到你的问题，我认为它是安全的，我不推荐它，因为这不是一件标准的事情（这是我第一次看到有人将ref存储在state中），但除此之外，它是安全的，并且不会因此而做出反应。我问您试图实现什么，因为我认为有更好的方法。您将如何实现？例如，我看到这将涵盖您现在拥有的所有用例：。但这不是唯一的解决办法，也不是最好的办法。您可以尝试进行更多的实验，以获得满足此用例甚至未来用例的设计。例如，如何更改默认过滤器的顺序？您可以通过组件和组合完成很多工作。祝你好运：D