如何从外部访问 React 类方法？答案

【问题标题】：How do I access a React Class method from outside?如何从外部访问 React 类方法？
【发布时间】：2019-08-14 17:29:58
【问题描述】：

假设我有一个这样定义的组件 -

// 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 也无权访问状态。我如何实现这样的目标？

【问题讨论】：

该方法需要放在提供程序中并在两个组件之间共享
React 不希望你从外部更新状态。为了解决您的情况，我认为您需要将此状态“isAction”存储在其他地方（父组件、redux 状态、上下文等），而不是在此组件中，并通过道具将其传递给“ActionComponent”。
@vega 你的意思是 HOC 还是使用类似 redux 的东西？如果不是 redux，你能给我看一个示例代码吗？
@Doppio 我知道您所说的方法。然而，正如我所说，组件正在另一个页面上呈现，如果不遍历反应树，我就无法传递道具。
“组件在不同的页面呈现”这到底是什么意思？

标签： javascript reactjs class ecmascript-6

【解决方案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> 
}

如果您需要对父级而不是子级触发操作，您可能希望在上层或lift state up 上构建您的状态。

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

【讨论】：

感谢@flppv，但这需要我在我想调用函数的同一个地方实际渲染子组件。在我的代码结构中，我在其他地方渲染了组件，我需要从另一个地方设置它的状态。仅仅做出反应就绝对没有办法吗？
你可以通过在外部使用 state 来使用 React 来做到这一点。例如，您有组件A，您需要状态active 和组件B 来控制A 的active。您可以将activeA 存储为其父C 的状态并将activeA 作为支持到A 和toggleActiveA 到B。这可能是大型应用程序中的一个大支柱，这就是为什么现在有很多状态管理工具的原因。它们使不钻孔更容易。
顺便说一句，你也可以尝试使用 Context API，我扩展了我的答案。