Question

学习了React并学习了React Hooks一周之后，我偶然发现了组件之间的通信问题，如下所示：

父母对孩子
孩子对父母
孩子到孩子（兄弟姐妹）

通过添加名称为onChange的prop并传递其父级上定义的函数，我能够从孩子与其父级进行通信。

这就是我在父母中所拥有的：

function handleChange(val: any) {
    console.log(val)
    console.log(hiddenPiece)
}

return ( 
    <div className="board-inner">
        {puzzlePieces}
    </div>
)

这是孩子：

props.onChange(props.index);

真正的问题是，在单击状态之后或当孩子的状态发生变化时，我如何直接与父母与孩子进行通信？我一直在寻找简单的样本，但我想目前我的研究还不够好。我需要一个可以为我提供清晰示例的人。感谢您抽出宝贵的时间在这里帮助我。

Answer 1

这是您描述的两种情况的非常基本的示例（父母>孩子和孩子>父母）。父级拥有状态，具有一些修改状态并呈现两个子级的功能。

https://codesandbox.io/s/silly-browser-y9hdt?file=/src/App.tsx

`Error initializing entry point('gnome','keyrings.alt.Gnome',None,Distribution('keyrings.alt','3.4.0'))`

第一个孩子从父母那里收到状态，并使用确实显示出不同的东西（在这种情况下为“三重”）

const Parent = () => {
  const [counter, setCounter] = useState<number>(1);

  const handleIncrement = () => {
    setCounter((prevCount) => prevCount + 1);
  };

  const handleDecrement = () => {
    setCounter((prevCount) => prevCount - 1);
  };

  // used as prop with the children
  const doubleTheCounter = () => {
    setCounter((prevCount) => prevCount * 2);
  };

  return (
    <div>
      <h1>Parent counter</h1>
      <p>{counter}</p>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
      <ChildTriple countFromParent={counter} />
      <DoubleForParent doubleCallback={doubleTheCounter} />
    </div>
  );
};

第二个子级从父级接收回调函数，该回调函数会更改父级的状态：

type ChildTripleProps = { countFromParent: number };

// Receives count state as prop
const ChildTriple = ({ countFromParent }: ChildTripleProps) => {
  const [tripleCount, setTripleCount] = useState<number>(countFromParent * 3);

  useEffect(() => {
    setTripleCount(countFromParent * 3);
  }, [countFromParent]);

  return (
    <div>
      <h1>Child triple counter</h1>
      <p>{tripleCount}</p>
    </div>
  );
};

对于您的第三种情况（孩子<>孩子），有很多不同的选择。显然，第一个是在父母中保持状态，并将状态传递给两个孩子，类似于本例中的父母。

如果子孙或组件在树中的距离更远，则使用某种状态管理解决方案可能很有意义。大多数情况下，内置React context完全足够。如果您想寻求有关上下文的最佳实践，我强烈建议Kent C. Dodds' blog post。这也将帮助您更好地了解React生态系统。

在我看来，外部状态库是a）too complex as a beginner，b）really new and not battle proven或c）not a best practice anymore or overblown。

在React Hooks中通信组件的简单而正确的方法是什么？

1 个答案: