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

Question

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

javascriptreactjsclassecmascript-6

3

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

Original Answer

翻译成：

最初的回答

// 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。

翻译结果：从另一个文件中设置第一个组件的状态，无需渲染它，无需使用refs或props。

// newfile.js

import ActionComponent from './actioncomponent.js'

ActionComponent.doAction()

我知道doAction无法导出，而将其称为static也无法访问状态。我该如何实现类似的功能？

最初的回答：

- Aswin

1

那个方法需要放在一个提供者中，并在两个组件之间共享。 - Vega

React不希望你从外部更新状态。为了解决你的情况，我认为你需要将这个状态'isAction'存储在其他地方（父组件、redux状态、上下文等），而不是在这个组件中，并通过props传递给'ActionComponent'。 - Doppio

@vega 你是指高阶组件（HOC）还是使用类似redux的东西？如果不是redux，你能给我展示一个代码示例吗？ - Aswin

@Doppio 我知道你说的方法。但是正如我所说的，该组件在不遍历React树的情况下被渲染到另一个页面上，所以我无法传递props。 - Aswin

这句话的意思是组件正在不同的页面上进行渲染。 - Felix Kling

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- flppv · 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会非常合适。