Question

我是新手做出反应和减少。我试图将我的组件分成容器和表示组件。到目前为止，我设法通过将动作和状态作为从Container传递到组件的道具来分离它们。

以下是它们的样子：

容器：

class HelpForm extends React.Component{
  constructor(props, context) {
    super(props, context);

    this.state = {
      help: { message: "" }
    };

  }

  render(){
    return (
      <HelpFormUI actions={this.props.actions} helps={this.props.helps} />
    );
  }
}

HelpForm.propTypes = {
  actions: PropTypes.object.isRequired,
  helps: PropTypes.array.isRequired
};


function mapStateToProps(state, ownProps){
  return {
    helps: state.helps
  };
}

function mapDispatchToProps(dispatch){
  return {
    actions: bindActionCreators(helpActions, dispatch)
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(HelpForm);

演示：

onClickPost(event){
      this.props.actions.createHelp(this.state.help);
  }

  render(){
    return (
      <div>
        <h2>What can you help today?</h2>
        <input
          type="text"
          onChange={this.onMessageChange}
          value={this.state.help.message} />
        <input
          type="submit"
          value="Post"
          className="btn btn-primary"
          onClick={this.onClickPost} />
      </div>
    );

我的问题是：将动作和状态作为道具传给孩子们是否可以？如果不是，那么正确的方法是什么？我也想知道，如何在不将其作为道具传递给儿童的情况下访问父母的状态？

谢谢！

Answer 1

我会抛出一些警告：我不是100％肯定我会按照你的例子，因为你遗漏了很多演示组件，我并不真正理解将“UI”分解的好处真的从容器中出来，但话说回来，你的实现对我来说似乎并不合理。您可以connect HelpFormUI，但似乎所有容器都在为您做，所以我假设您正在努力避免这种情况。

在不将孩子作为道具传递的情况下访问孩子的父母状态的方法是触发更新state和connect孩子的行动。

在redux

1 个答案: