javascript - react 如何从另一个类调用状态变量？

Question

Search.js

class Search extends Component {
  constructor() {
    super();
    this.state = {
      selectedPictures: []
    }
  }

  static getSelectedPictures = () => {
      return this.state.selectedPictures;
  }

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


}

export default Search;

Other.js

import Search from './Search';

class Other extends Component {
      constructor() {
        super();
        this.state = {

        }
      }


     render() {
       console.log(Search.getSelectedPictures); --> Uncaught null
       return (
         <div>
           ...
        </div>
        );
     }
    }

export default Other;

如何在Other.js中调用Search.state.selectedPictures？

我已经尝试使用静态方法返回this.state.selectedPictures并调用Other.js，但无法访问。

有什么方法可以导入或传输var？两个js文件都是单独的文件

谢谢。

Answer 1

由于几个原因，您尝试做的事情在 React 中实际上是不可能的。首先，您尝试在类 上调用方法和访问属性，而不是在对象 上。在普通(现代)JS 中，您需要使用 new 实例化类。关键词。例如，search = new Search(); search.getSelectedPictures() - 然而，这并不是 React 的工作方式，因为你的类实际上是组件，你必须使用 <Search/>渲染函数中的组件语法。

关于获取 Search 中的状态，您需要通过 from Search 的状态到 Other .

一种方法是将状态直接传递给 Prop ，因此在 search.js 中:

render() {
  <Other selectedPictures={this.state.selectedPictures} />
}

然后在 other.js 中:

render() {
  this.props.selectedPicture.forEach((pic) => <img src={pic} />);
}

或者，您可以拥有一个更全面的父组件，并将状态保存在那里。然后将该状态同时传递给两个组件，如果您列出的组件不具有父子关系。

还有一些方法，尽管稍微复杂一些，但可以使用 Search 来做你想做的事。作为 Other 的 child ，但在不知道这两个组件到底是什么的情况下，很难说清楚。