反应：跟踪多个父母的兄弟姐妹元素

发布于 2025-02-11 17:09:28 字数 1444 浏览 2 评论 0原文

...在当前实施中，您可以表达事实一个子树在其兄弟姐妹之间被移动了，但是您不能告诉它它已经移动了其他地方。该算法将启用那个完整的子树。

因此，键参数仅将原始树中的儿童与后续树中的儿童匹配，以便单亲父母。

有没有办法告诉孩子搬到另一个父母？转变儿童的解决方案？

用于跟踪

其他

const [state, setState] = useState({ title1: ["e1", "e2", "e4"], title2: ["e3"] })

或

return Object.keys(state).map((title) => (
    <div key={title}>
      {state[title].map((e) => (
        <div key={e}>{e}</div>
      ))}
    </div>
  ));

CSS 在某个地方进行了一个单击：

<button onClick = {onClick("e4","title2")}>Move E4 to Title2</button>

使用此单击辅助功能：

 const onClick = (elem, newtitle) => () =>
    setState((s) => {
      const titles = Object.keys(s);
      const title = titles.filter((t) => s[t].includes(elem))[0]; //find which title contains the element

      return {
        ...s,
        [title]: s[title].filter((e) => e !== elem), // remove element from old title list
        [newTitle]: s[newTitle].concat(elem), //add it to new title list
      };
    });

这呈现新状态，其中E1，E2，E3和他们的父母都使用关键属性跟踪，但E4在Title2中被呈现为新元素。

我什至不知道从哪里开始，或者甚至可能是否有可能，因为文档说这是不可能的。

PS我想为CSS过渡做到这一点

原文

The react docs say:

... In the current implementation, you can express the fact
that a subtree has been moved amongst its siblings, but you cannot
tell that it has moved somewhere else. The algorithm will rerender
that full subtree.

So the key parameter only matches children in the original tree with children in the subsequent tree for a single parent.

Is there a way to tell React a child has moved to another parent?
Or another solution for tracking children for CSS transitions?

For example:

If I use:

const [state, setState] = useState({ title1: ["e1", "e2", "e4"], title2: ["e3"] })

To return a list of lists to a render function:

return Object.keys(state).map((title) => (
    <div key={title}>
      {state[title].map((e) => (
        <div key={e}>{e}</div>
      ))}
    </div>
  ));

But then decide to move "e4" to title2 with an onClick somewhere:

<button onClick = {onClick("e4","title2")}>Move E4 to Title2</button>

Using this onClick helper function:

 const onClick = (elem, newtitle) => () =>
    setState((s) => {
      const titles = Object.keys(s);
      const title = titles.filter((t) => s[t].includes(elem))[0]; //find which title contains the element

      return {
        ...s,
        [title]: s[title].filter((e) => e !== elem), // remove element from old title list
        [newTitle]: s[newTitle].concat(elem), //add it to new title list
      };
    });

This renders the new state, where e1, e2, e3, and their parents are all tracked using the key property, but e4 is rendered as a new element in title2.

I don't even know where to start with this, or if it is even possible since the docs say it isn't possible out of the box.

P.S I am wanting to do this for CSS transitions

分享到QQ

分享到微博