如何從外部訪問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非常適合。