Question

我想知道是否可以为子项创建一个父包装器，它会自动将一部分redux存储传递给它的子节点。

实施例

<ReducProvider src="user">

  <ul> {this.props.data.map(f=><li>{f.name}</li>)} </ul>

</ReducProvider>

这里我希望用props.data = ReduxProvider传递给它的数据来渲染这个ul。

我知道我可以简单地使用连接来获得我需要的部分

connect( (state,prop)=>({data:state[prop.src]}) )(ReduxProvider)

但有时候我不希望父母听到商店的变化，我也不希望孩子知道这些数据的来源，所以我打算为每个我有的Reducer创建一个Provider。这种方式，当商店变异时，这些提供商是唯一一个获得更新的人。

Answer 1

虽然不是您问题的答案，但这可能会解决您的问题。

您可以创建无意义的代理组件。这些组件呈现实际组件并将正确的变量作为props传递。我记得已经读过你可以自动生成这样的组件。

ES6中此类组件的示例：

import React from 'react';
import { connect } from 'react-redux';
import User from './User';

class AuthenticatedUser extends React.Component {

    render() {
        return <User user={this.props.user} />
    }
}

export default connect(
    (state) => ({ user: state.Authentication.user }),
    (dispatch) => {}
)(AuthenticatedUser);

！代码未经测试
因此，此代码会将经过身份验证的用户从状态注入User组件。保持User组件清洁，即您可以从任何来源渲染您喜欢的任何用户。您还创建了一个选项，用于呈现自动链接到商店的用户的连接版本。

回答实际问题：
我建议不要这样做，因为上下文是彻头彻尾的坏习惯。但是您可以将变量存储在上下文中。然后，当使用contextTypes属性请求时，儿童可以访问这些变量。

Reactjs创建一个将Redux传递给其子代的提供程序组件

1 个答案: