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;

ComponentA导入pp.js，并尝试将App.functionA分配给函数B，然后在JSX中调用它。这会导致失败，基本上就是说函数没有定义。

我知道这不是功能共享的方式（我已经学习了如何通过道具等传递功能）。

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

谢谢你，柯蒂斯

Answer 1

我的脑子终于明白了哈哈。。。我想。

基本上，由于类[App component]的实例未在ComponentA的范围内初始化，因此无法访问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;

Answer 2

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

您可以这样在ES6类中编写静态：

class Component extends React.Component {
static propTypes = {
...
}

static someMethod(){
}

}

关于静态函数的工作演示