Question

我的组件中有一个静态方法，如下所示：

static updatestate(totalCount,totalCost){
   this.setState({totalCount,totalCost});
}

我只需要使用静态方法即可将数据传递给组件。但是如您所知，我们不能在静态方法中使用this。有什么方法可以将数据传递给非静态方法，而无需创建新实例和道具。如下：

import MyComponentName from './MyComponentName.js';
MyComponentName.MyMethod(params)

谢谢。

Answer 1

如您所述，不能在静态方法中使用this。

如果尝试在特定组件实例上调用方法，请对该实例使用ref。假设您要在此组件上调用updateState：

class ChildComponent extends React.Component {
  state = {totalCount: 0, totalCost: 0};

  updateState = (totalCount, totalCost) => {
    this.setState({totalCount, totalCost});
  }

  render() {
    const {totalCount, totalCost} = this.state;
    return <Text>totalCount: {totalCount} totalCost: {totalCost}</Text>;
  }
}

您将获得一个ref实例，然后可以调用updateState：

class ParentComponent extends React.Component {
  render() {
    return (
      <View>
        <ChildComponent ref={child => {
          this.child = child; // gets a ref to the child component 
        }} />
        <TouchableOpacity onPress={() => {
          const {totalCount, totalCost} = this.child.state;
          this.child.updateState(totalCount + 1, totalCost + 10); // call method on child component
        }}><Text>press</Text></TouchableOpacity>
      </View>
    );
  }
}

（如果相反，您想在组件的所有实例上setState，则最好使用React.createContext Provider来提供ChildComponent的功能。是Consumer的对象。

我可以在带有静态响应的静态方法中使用setState吗？

1 个答案: