Question

假设我有两个名为A和B的组件。

B的状态不断变化，我想将状态传递给A，以便在满足某些条件时触发事件。

如何在React中继续监视/获取来自其他组件的子状态？

谢谢！

Answer 1

如果你在讨论亲子关系，你所要做的就是定义一个改变A状态的函数，并将其作为prop传递给B，如下所示：

class A extends Component {

  constructor(props) {
    super(props);
    this.state = {
      changed: false,
    }
  }

  _statusChange = () => this.setState({ changed: !this.state.changed });

  render() {
    return(
      <div>
        <span>State on A: { this.state.changed.toString() }</span>
        <B changeHandler={this._statusChange} />
      </div>
    )
  }
}

class B extends Component {

  render() {
    return(
      <div>
        <button onClick={this.props.changeHandler}>Click me</button>
      </div>
    )
  }
}


const App = () => (
    <A />
);

如果它们应该在同一级别上，按照惯例，你应该定义第三个组件，在其中包装A和B，再次将状态作为它们之间的道具传递。

Answer 2

当组件处于同一级别时：

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      status: "B not clicked"
    }
    this.componentBchangeHandler = this.componentBchangeHandler.bind(this);
  }
  componentBchangeHandler(value) {
    this.setState({ status: value })
  }
  render() {
    return (
      <div>
        <ComponentA status={this.state.status} />
        <ComponentB componentBchangeHandler={this.componentBchangeHandler} />
      </div>
    )
  }
}

const ComponentA = (props) => <div>{props.status}</div>;
const ComponentB = (props) => <div onClick={() => props.componentBchangeHandler("some val")}>click me</div>;

https://codesandbox.io/s/k29mn21pov

查看我之前提到的文件。

当另一个组件的子状态发生变化时触发事件

2 个答案: