React/ES6 -> 如何从另一个组件调用 React 组件 class 方法？

Question

是否可以从 class/component 中的其他 (React) 组件调用 class 方法？

示例：

// file x.js
import React, { Component } from 'react'

class X extends Component {
    methodY() {
        console.log('methodY')
    }
    render() {
        return <div />
    }
}

export default X



// file z.js
import React, { Component } from 'react'

class Z extends Component {
    render() {
        return <button onClick={X.methodY} />
    }
}
export default Z

Answer 1

从技术角度来看可能是可行的 - 但您确实不应该。

开始使用新框架时，重要的是要接受其社区的意识形态和模式。对于 React，没有诸如类和方法之类的东西。相反，只有 components 和 data（并且在某种程度上 state）。

遵循 flux 原则，您应该尝试以数据单向流动的方式构建您的应用程序。从上到下。

因此，不是组件 Z 调用组件 X 上的函数，您可以让 X 从父组件接收一个函数，修改该组件的状态，然后传递一个新值至 X.

const A = ({onClick}) => (
  <button onClick={onClick}>Click me</button>
);

const B = ({value}) => (
  <span>{value}</span>
);

class Parent extends React.Component {
  constructor() {
    this.state = {
      foo: 'foo'
    };
  }

  render() {
    return (
      <div>
        <A onClick={() => this.setState({foo: 'bar'})}/>
        <B value={this.state.foo}/>
      </div>
    );
  }
}

如您所见，父组件现在负责处理状态并将不同的兄弟组件连接在一起。

随着您进一步探索 React，您可能会开始使用 Redux 将数据和状态的逻辑完全提取到您的组件之外。您最终得到的是展示组件和容器组件。

React/ES6 -> 如何从另一个组件调用 React 组件 class 方法？

React/ES6 -> How to call an React component class method from another component?

reactjs

es6-class