将事件结果传递给子组件

Question

我的ParentComponent很大，中间的列表很小。

我希望能够单击ParentComponent中的某个位置，接收特定于ParentComponent的事件属性，并将其传递给子ListItem组件。

我知道我可以通过使用Ref / forwardRef来完成此操作，但是有没有更好，更明显的方法，我没有看到？

const ParentComponent = () => {
    const clickHandler = (event) => {
        //receive event properties specific to the parent
        //and pass down to to the ListItem component from here
    }

    return (
        <div onClick={clickHandler}>
            <ul>
                <ListItem />
            </ul>
        </div>
    );
}

Answer 1

您可以在父组件中设置状态并将当前的click事件存储在其中，然后将其传递给ListItem，这样，当您更改状态时，父组件将被重新呈现，您可以发送该事件作为道具到ListItem。例如，像这样将具有useState的状态添加到ParentComponent。

 const [clickEvent, setClickEvent] = useState();

然后onClick div函数的内容如下：

const clickHandler = event => {
   event.persist();
   setClickEvent(event);
};

然后将该当前事件传递给您的ListItem，如下所示：

  <ListItem event={clickEvent} />

现在，只要该点击事件发生更改，您的ListItem就会重新呈现并获得该更改事件。

完整的代码可以在这里找到：

您也可以始终使用redux并将该事件存储在可以连接到子组件的商店中，但这可能有点过分。这完全取决于您的问题。