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

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

// 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>
        )
    }
}

然后在Child组件中，您可以触发该操作

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

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

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

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

1 个答案: