通过从控制器调用其成员函数来更新 React 组件状态是否可以？

是的，您可以这样做，但这是不必要的。通常你想通过从父级传递props来更新子状态。我已经制作了一些示例，说明如何从下面的父级更新子级。

示例 1：

在此示例中，您不需要为 Child 提供任何状态。Parent 管理状态并通过 props 将任何更改传递给 Child。这是推荐的方法。

家长

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {text: "hello"};
  } 

  render() {
    return <Child data={this.state.text} />;
  }
}

孩子

class Child extends React.Component {    
  render() {
    return <span>{this.props.data}</span>;
  }
}

示例 2：

在这个例子中，我们使用两种状态，一种用于每个组件。这对于此实现来说是不必要的，但您仍然可以这样做。当 Child 挂载时，我们将状态设置为 data prop 设置的任何值。每当 Child 组件收到带有componentWillReceiveProps().

家长

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {text: "hello"};
  } 

  render() {
    return <Child data={this.state.text} />;
  }
}

孩子

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {childText: props.data};
  }

  componentWillReceiveProps(nextProps) {
    if(nextProps.data !== this.props.data)
      this.setState({childText: data});
  }

  render() {
    return <span>{this.state.childText}</span>;
  }
}

示例 3：

在这个例子中，子组件被赋予了一个ref，然后我们可以使用它来触发来自父的子函数。通常这是按照相反的顺序完成的（触发一个从 Child 到 Parent 的函数），但如果你愿意，你仍然可以这样做。这是更手动的方法，类似于您所问的。

家长

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {text: "hello"};
  }

  triggerUpdate = () => {
    this.child.component.update(this.state.text);
  }

  render() {
    return <Child ref={(el) => this.child = el} data={this.state.text} />;
  }
}

孩子

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = {childText: props.data};
  }

  update = (text) => {
    this.state({childText: text});
  }
    
  render() {
    return <span>{this.state.childText}</span>;
  }
}