javascript - 使用父组件的 Prop 设置状态

Question

有没有一种方法可以使用 Component 从父组件？

export default class SomeComp extends Component {
    constructor(props) {
        super(props);

        this.state = someProps; // <-- I need the props to be the state of the Component
    }


    render() {
        const { someProps } = this.props;
        ...
    }
}

或者我可以写一个函数，比如

export default class SomeComp extends Component {
    constructor(props) {
        super(props);

    }

    _setProps = (someProps) => {
          this.State = someProps;
    }

    render() {
        const { someProps } = this.props;
        this._setProps(someProps);
        ...
    }
}

Answer 1

正如 Mayank Shukla 所提到的，将父属性存储在子状态中是一种不好的做法，因此在子状态中管理状态。

将 props 传递给 child 的整个想法是，你不需要关心 child 的状态，因为它都是从 parent 那里滴下来的。

子组件应该只关心它们的状态。

您应该做的(以及什么是好的 react 实践)是在父组件中拥有状态并将事件处理程序向下传递给子组件，这将改变父组件的状态。

// in parent
class MyParentComponent extends React.Component {
  constructor() {
    super();
    this.state = {
      data: someData;
    };
  }

  handleChange(data) {
    this.setState(data);
  }

  render() {
    return (
      <MyChildComponent
        data={this.state.data}
        handleChange={this.handleChange}
      />
    );
  }
}



class MyChildComponent extends React.Component {
  // this is going to update the data in parent
  // and trickle it back down to the child
  this.props.handleChange({ foo: 'bar' });
}