javascript - react : Grabbing properties from child components - how?

Question

我正在学习 React，并且我错过了我的子组件拥有自己的属性和状态的可能性，这些属性和状态可以通过其容器访问。

我正在努力寻找一个好的解决方案来解决这个问题:我想构建一个带有侧边栏的标准站点布局(也许每一侧都有一个)。我希望通过单击位于其他位置的按钮来折叠侧边栏(为简单起见，让我们将按钮放置在侧边栏的同一水平上 - 但在侧边栏之外)。 像这样的事情:

    <div className="container">
      <SideNav name="Nirvana" side="left"/>
      <button> Open Left</button>
      <div className="content">I'm full!!!</div>
      <button>Open Right</button>    
      <SideNav name="Beatles" side="right"/>
    </div>

为了实现“可折叠的东西”，容器需要知道侧边栏的宽度(至少通过我研究的 CSS 技术)。 我希望容器直接从侧边栏获取这些信息(宽度)，因为只有它们知道将在其中渲染什么......

但据我了解，这是 React 不适合的模型。这样对吗？我应该如何通过 React 方法处理这个问题？

我知道一种可能的方法是将回调传递给子组件。对于子级捕获的值(例如用户填写的文本字段)似乎没问题。但对于与 child 一起“出生”的值(value)观似乎很奇怪(而且太冗长)......

我正在寻找其他东西。也许是另一种构建组件的方法或类似的方法。

下面我将介绍我所做的解决方法，但它看起来不会很好地升级:

为了使子组件的属性可用于父组件(容器)，我在容器上创建了它:

const childProps = {};
function getprops(comp_id, comp_props)
{
  childProps[comp_id] = comp_props;
  return comp_id;
}

我将函数 getprops 传递给“感兴趣的组件”:

<SideNav name="Nirvana" width={widLeft} closeNav={closeSidenav} side="left"  getprops={function (p) {return getprops('leftnav', p);}}/>

他们会称其为传递内部状态:

const myProps = {width: 240, side: props.side};
const myId = props.getprops(myProps);

就是这样。

Answer 1

注意:

• 自上而下的通信:可以使用任何类型的数据
• 自下而上的通信:只能使用回调

如果您的用例非常简单，则此解决方案有效。但如果您有更复杂的用例，那么您应该使用上下文或任何状态管理库，如 redux、mobx 等。

const Parent = () => {
    const [state, setState] = React.useState(0);
    const handleClick = (val) => setState(val);
    return (
      <div>
        <h1>Parent: {state}</h1>
        <Child onClick={handleClick} state={state} />
      </div>
    );
};

const Child = (props) => {
    const handleClick = () => props.onClick(props.state + 1);;
    return <h2 onClick={handleClick}>Child: {props.state}</h2>;
};

// Render it
ReactDOM.render(<Parent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

<div id="root"></div>