时间戳

首页 > 解决方案 > React 将 x 状态变量传递给 y {props.children}

javascript - React 将 x 状态变量传递给 y {props.children}

问题描述

我正在使用功能组件。我已经构建了单独的组件并将它们放入我的index.js文件中。

现在组件的结构是（伪代码）：

<App stateVariable1={x} stateVariable2={y} stateVariable3={z}>
  <ChildOne props1={x} props2={y} />
  <ChildTwo props1={z}/>
</App>

ChildOne 和 ChildTwo 目前在 内渲染App.js，因此将状态变量传递给两个孩子非常容易。

我想将渲染的子元素提取到其中index.js并用 {props.children} 替换两个子元素App.js，以增加组件的 SRP 并使其更具可重用性。

但是，我正在努力理解如何将多个状态变量作为多个道具传递到props.children我的index.js文件中。

我已经阅读了 Render Props 的 react 文档，其中处理了一个道具被传递给一个孩子，而不是多个想要接收不同道具的孩子。

我如何去实现我想做的事情？

更新

我已尝试按照此处接受的答案使用渲染道具：如何将道具传递给 {this.props.children}

我的index.js样子是这样的：

ReactDOM.render(
  <React.StrictMode>
    <App>
      {(stateVariable1) => (
        <Fragment>
          <ChildOne props1={stateVariable1} props2={stateVariable2} />
          <ChildTwo props3={stateVariable3} />
        </Fragment>
      )}
    </App>{' '}
  </React.StrictMode>,
  document.getElementById('root')
);

然而，所有的 props/stateVariables 都存在未定义的错误，因为它们当然没有在index.js.

我哪里错了？

更新 2：解决方案

我将所有状态变量作为参数传递给渲染道具，这解决了这个问题：

ReactDOM.render(
  <React.StrictMode>
    <App>
      {(stateVariable1, stateVariable2, stateVariable3) => (
        <Fragment>
          <ChildOne props1={stateVariable1} props2={stateVariable2} />
          <ChildTwo props3={stateVariable3} />
        </Fragment>
      )}
    </App>{' '}
  </React.StrictMode>,
  document.getElementById('root')
);

有没有办法解构它，这样我就不需要将每个参数传递给回调？我正在使用功能组件，因此状态存储在多个变量中，而不是在类组件的状态对象中。

标签： javascriptreactjs

解决方案

我认为您可以避免props.children完全使用。

如果您有如下结构，您的SRP原则仍然适用。

  • 应用程序
    • 孩子 1
    • 孩子 2

props.children上面几行的意思是，你可以在你的组件中拥有你的Child1和Child2作为组件，而不是使用渲染道具模式或拥有App。

就像是

const App = (props) => {
 return (
   <>
     <Child1 {...props} />
     <Child2 {...props} />
   </>
 );
}

如果您想让代码更通用并拥有一个Children组件，您可以将所有子组件提取到index.js文件中，以便您的App组件保持不变，但老实说可能不需要这样做。

推荐阅读