ReactJS 问题组件函数范围和共享函数

Question

我有一个关于ReactJS和组件的问题，特别是关于函数如何在组件系统中交互的问题。

在此示例中：

// Index.js
import React from ‘/reactʼ;
import ReactDOM from ‘/react-domʼ;
import App from ‘./App.jsʼ;
ReactDOM.render(<App />, document.getElementById(‘rootʼ));

// App.js
import React from ‘/reactʼ;
class App extends React.Component { 
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ}; 
};
functionA = (e) => { console.log(e);
};
Render() {
return <div><ComponentA /></div>
}; 
};
export default App;
// ComponentA.js
import React from ‘/reactʼ; 
import App from ‘./../App.jsʼ;
class ComponentA extends React.Component { 
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ}; 
};
functionB = App.functionA
Render() { 
return(
<div>
<input onSubmit={this.functionB} />
</div> 
);
}; 
};
export default ComponentA;

组件 A 导入 App.js并尝试将 App.functionA 分配给函数 B，然后在 JSX 中调用它。这导致失败，基本上表示未定义函数。

我知道这不是功能共享的方式(我已经了解了通过道具等传递函数(。

我只是想知道为什么这不起作用，以帮助我更好地理解 React 和 Javascript 的机制。

谢谢 柯蒂斯

Answer 1

要从另一个 React 组件调用函数，可以用 ES6 表示法编写静态方法。如果您使用的是 ES7，那么您还可以编写静态属性。

您可以通过以下方式在 ES6+ 类中编写静态：

class Component extends React.Component {
static propTypes = {
...
}
static someMethod(){
}

}

关于静态函数的工作演示

Answer 2

我的菜鸟大脑终于想通了，哈哈......我认为。

基本上是因为类 [App 组件] 的实例未在组件 A 的范围内初始化，因此无法访问 App 函数。

这使它工作(免责声明：我不打算这样做，我知道它糟糕的代码(

// ComponentA.js
import React from ‘/reactʼ; 
import App from ‘./../App.jsʼ;
class ComponentA extends React.Component { 
constructor(props) {
super(props);
this.state = {someProp = ‘ʼ};
this.appInstance = new App();
}
functionB = (e) => {
this.appInstance.functionA(e);
}
Render() { 
return(
<div>
<input onSubmit={this.functionB} />
</div> 
);
} 
};
export default ComponentA;