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中的状态访问权限，您需要将该状态从 Search 传递到 {{ 1}}。

一种方法是直接将状态传递给道具，所以在search.js中：

Other

然后在other.js：

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

或者，您可以拥有更多的伞形父组件，并保持状态。然后将该状态同时传递给两个组件，如果您列出的组件不具有父子关系。

除了render() { this.props.selectedPicture.forEach((pic) => <img src={pic} />); } Search作为Other的孩子之外，还有一些虽然稍微复杂一些的方式可以做你想做的事，但不知道这两个组成是什么，它是什么很难说出来。

Answer 2

使用flux体系结构。简单的实现是

alt flux

只需创建一个动作和一个商店。当您选择图像时，只需将它们放入使用操作的商店中，然后使用<AltContainer />

将它们作为道具

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

2 个答案: