Question

我有一个React.Component，我想从许多不同的React.Component中调用这个静态函数。

class Categories extends React.Component {
  constructor(props) {
    super(props);
    this.getCheckedCategories = this.getCheckedCategories.bind(this);
    this.state = {
      checked: [],
      unchecked: []
    };
  }

  static getCheckedCategories() {
    return this.state.checked;
  }
}

所以我尝试连接该功能。

import Categories from './product/checkboxes';

class FullWidthGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    const { classes } = this.props;
    const checkedCategories = Categories.getCheckedCategories();
  }
}

Answer 1

这就是静态功能的目的。它无法访问实例（this）。您可以拥有多个类实例，但只能有一个静态函数/属性。

作为一种解决方法（取决于您想要做什么），您可以使用静态属性来存储您的状态：

class Categories extends React.Component {
  constructor(props) {
    super(props);
    Categories.state = {
      checked: [],
      unchecked: []
    };
  }

  static getCheckedCategories() {
    return Categories.state.checked;
  }
}

但它不能使用setState，因为它是一种实例方法。

想象一下，如果您拥有多个Categories组件并且每个组件都有不同的已选中/未选中的类别，则会出现这种情况。那么Categories.getCheckedCategories()函数会返回什么？

如果你想拥有共享状态（已检查的类别），我建议你从组件中取出状态。例如，将其存储在父组件中，并将其作为道具传递给子组件。或者使用像redux这样的状态库。您还可以使用react的上下文来管理共享状态。

Answer 2

static函数无法访问this，即静态方法调用直接在类上进行，并且在类的实例上无法调用。您可以在here上阅读更多内容。

所以在你的情况下你可以这样做：

class Categories extends Component {
  state = {
    checked: [],
    unchecked: []
  };

  static getCheckedCategories = (klass) => {
    return klass.state.checked
  }

  render() {
    return (
       <div>{Categories.getCheckedCategories(this)}</div>
    );
  }
}

工作示例here。

无法阅读财产＆＃39;已检查＆＃39;未定义，来自React.Component静态函数

2 个答案: