Question

我正在将我的站点从LAMP堆栈转移到MERN堆栈。在旧站点上，我有一个下拉菜单，其中有一个按钮可以切换其父母同胞之一的div的显示。结构如下：

<div class="header">
    <div class="header-option">Option 1</div>
    <div class="header-option" id="toggle-dropdown">Option 2</div>
    <div class="header-option">Option 3</div>
</div>
<div id="dropdown-content">
    Lorem ipsum
</div>

我将使用JQuery来检测对#toggle-dropdown的单击，然后切换#dropdown-content的显示。我把它变成了一个可重用的插件，可以在整个站点中使用。我现在想在React中使用可重用的组件做类似的事情。但是我似乎找不到用于访问和修改非即时儿童道具的最佳实践。我当然会将所有这些都包装在<Dropdown>组件中，以处理状态并能够抽象该过程。

到目前为止我已经想到并发现的东西：

遍历子代及其子代，以此类推，查找displayName，然后克隆子代；但我认为这不适用于生产。
将JSX作为Dropdown的页眉和页脚道具，然后尝试在具有适当道具的组件中生成DropdownButton和DropdownContent；我觉得这对于我觉得应该比较容易的事情来说是一个非常低效，不受欢迎的解决方案。

Answer 1

您以错误的方式认为。您不应该从其中一个孩子的状态更改父母的状态。您可能有一个Container组件，期望接收到切换的内容...

const CollapseContainer = ({ placeholder, children }) => {
    const [collapsed, toggler] = useState(false)
    return (
        <>
            <button onClick={() => toggler(!collapsed)}>{placeholder}</button>
            {
                collapsed &&
                { children }
            }
        </>
    )
}

并像这样使用它：

<CollapseContainer placeholder='Click'>
     <p>Only show on click</p>
</CollapseContainer>

Answer 2

好的，所以您有

<Header>
   <Option />
   <Option onClick={this.handleDropdownclick} props={props}>
      <Dropdown>
   </Option>
   <Option />
</Header>

对吗？只需将onClick处理程序传递给您想要的选项，不是吗？还是我不明白你在问什么？

如果您的树很深，并且您不想手动传递每个道具，可以使用上下文吗？ https://reactjs.org/docs/context.html#contextconsumer

如何修改非直系儿童的道具

2 个答案: