如何从外部访问React Class方法？

Question

可以说我有一个这样定义的组件-

// actioncomponent.js

import React from 'react';

class ActionComponent extends React.Component {
    state = {
        isAction: false;
    }

    doAction = () => {
        this.setState({isAction: true})
    }

    render () {
        return (
            <div>
                Some render stuff..
            </div>
        )
    }
}

export default ActionComponent

从另一个完全不同的文件中，我想为第一个组件设置状态而不在新文件中渲染它 ，因此不需要使用refs或props。

// newfile.js

import ActionComponent from './actioncomponent.js'

ActionComponent.doAction()

我知道doAction无法导出，并且将其称为static也无法访问状态。 我如何实现这样的目标？

Answer 1

在React生态系统中，您可能不需要这个。

您可以将此方法传递给子组件：

class ActionComponent extends React.Component {
    state = {
        isAction: false
    }

    doAction = () => {
        this.setState({isAction: true})
    }

    render () {
        return (
            <div>
                <Child doAction={this.doAction} />
            </div>
        )
    }
}

然后在“子组件”中可以触发此操作

// ...
render() {
  <button onClick={() => props.doAction()}>Test</button> 
}

如果您需要对父级而不是子级执行操作，则可能需要在上层构建状态或提升状态 。

您也可以不用钻道具就可以达到类似的目标，但是您需要一些状态管理工具，例如Redux或在某些情况下Context API非常适合。