Question

我有一个布局组件，每个主视图都包含在其中。布局视图具有一个接受参数的子组件，即回调函数：

const Layout = props => (
  <React.Fragment>
    <Header onBack={props.onBack} />
    {props.children}
  </React.Fragment>
)

和示例主视图：

const Profile = props => (
  <Layout onBack={ this.onBack } >
    <div>page contents</div>
  </Layout>
)

我不喜欢将参数传递给父母，而只是将其传递给另一个孩子，这似乎很复杂，而且是 IMO 反模式。我已经用适当的reducer设置了一个redux存储...但是调用一个动作（例如setOnBack（myBackHandler））来更新存储状态是否有意义，并且在Header组件中它只是读取存储状态？当使差异决定状态改变时，redux如何测试其存储中的功能？

Answer 1

我建议的是将这些处理程序的实现与您的表示性组件分离到另一个名为HeaderContainer.js的文件中。现在，您可以使用/images/file.jpg组件，而不是直接在<Header/>组件中使用<Layout/>组件。

Layout.js

<HeaderContainer/>

HeaderContainer.js

import HeaderContainer from './HeaderContainer';

const Layout = (props) => (
  <React.Fragment>
    <HeaderContainer/>
    {props.children}
  </React.Fragment>
)

onBack处理程序现在作为prop暴露给呈现组件。请注意，如果您想使用本地状态，也可以使用诸如recompose之类的库，或者使用新的React hooks API（请谨慎使用）。这仍然是很新的东西，还不能投入生产。

react-redux将参数传递给同级组件

1 个答案: