Question

将动作（在这种情况下为状态）连接/绑定到定义该组件的同一文件中的组件是否是错误的做法？如果是这样，建议的做法是创建一个容器组件（概述为here）吗？如果是这种情况，并且我想将道具从父组件钻到需要操作和与之连接的状态的子组件，进而需要一个容器，该如何做？谢谢。

Answer 1

如果该组件是并且将是使用连接状态和动作的唯一组件，那么这不是一个坏习惯。即使不是这种情况，您也可以将多个组件连接到商店。但是，使用容器组件并将所需的状态部分和某些操作创建者传递给相关的子组件不是很容易吗？

import React from "react";
import ReactDOM from "react-dom";
import { connect } from "react-redux";
import { anAction, anotherAction } from "./actions/";

class ContainerApp extends React.Component {
  state = {
      maybeSomeLocalState: "",
  }

  render() {
    const { aState, anAction, anotherState, anotherAction } = this.props;
    return (
      <div>
        <Child
          aState={aState}
          anAction={anAction}
        />
        <Child2
          anotherState={anotherState}
          anotherAction={anotherAction}
        /
      </div>
    );
  }
}

const mapStateToProps = state => ({
  aState: state.aState,
  anotherState: state.anotherState,
});

export default connect( mapStateToProps, { anAction, anotherAction } )(ContainerApp);

const Child = (props) => (
  <div>
    <p>{props.aState.someValue}</p>
    <button onClick={props.anAction}>Do something</button>
  </div>
);

const Child2 = (props) => (
  <div>
    <p>{props.anotherState.someValue}</p>
    <button onClick={props.anotherAction}>Do another thing</button>
  </div>
);

将动作绑定到反应组件的位置

1 个答案: