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文件都是单独的文件
谢谢。
最佳答案
由于几个原因,您尝试做的事情在 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 ,但在不知道这两个组件到底是什么的情况下,很难说清楚。
关于javascript - react 如何从另一个类调用状态变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47847798/