React JS如何从另一个功能组件在一个组件中设置状态[重复]答案

【问题标题】：React JS How to Set State in One Component from Another Functional Component [duplicate]React JS如何从另一个功能组件在一个组件中设置状态[重复]
【发布时间】：2017-06-07 17:58:15
【问题描述】：

这绝对不是重复的。

这个问题是一个 React 问题。这应该是重复的问题是直接的 JavaScript。
问题在于我如何发送我的 React 函数，而不是我如何引用 this 或任何特定于“this”的内容。
这实际上非常有用，因为它显示了如何在 REACT 中更新状态！！！从一个组件到另一个组件，这允许更多的功能组件，这对 REACT 的效率来说是一件好事！！！！

太不公平了。

这绝对不是重复的。

请删除重复标记！

这是原始问题...

我有几个关于我继承的代码的问题。我在 Intranet 上工作，所以我必须输入我所询问的示例。

第一个问题，我有一个像下面这样的“类”，它是 JS 类还是 React 类？我假设反应...

import React from 'react';

class SomeUtil {
  constructor() {
    this.doAbc = this.doAbc.bind(this)
  }

  doAbc(...){
    ...
  }
}
export default SomeUtil;

我注意到没有 super() - 我应该添加吗？

第二个问题与创建一个类似的类有关，但我无法让它按我的意愿工作。

import React from 'react';

class SomeOtherUtil {
  constructor(someCallback) {

    this.externalCallback = someCallback

    this.doXyz = this.doXyz.bind(this)
    this.doXxz = this.doXxz.bind(this)
    **//do i need to bind externalCallback here ?**
  }

  doXyz(...){
    this.externalCallback('hello world!')
  }

  doXxz(...){
    this.externalCallback('hello bob!')
  }
}
export default SomeOtherUtil;

现在，当我使用 SomeOtherUtil 时，我想像这样使用它...

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new SomeOtherUtil(this.someRandomCallback)
  myUtil.doXyz();
  myUtil.doXxz();
}

更新

我发现了我的问题。我正在尝试这样做...

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new DataUtil(this.setState)
  myUtil.getThenSetData(...);
  myUtil.getAnotherWayAndSetData(...);
}

而我不得不这样做......

//inside a React Component
someRandomReactComponentMethod() {
  let myUtil = new DataUtil((data)=>this.setState(data))
  myUtil.getThenSetData();
  myUtil.getAnotherWayAndSetData();
}

我仍然不相信这是上述问题的重复，但无论如何。

感谢您回答关于 JS 类与 React 类的第一个问题。希望我能给半票。 :) 我不确定我的第一个问题，因为 react 是在顶部导入的，它将被编译成一个 react 类或直接的 JS。现在我知道。此外，过去当我使用 JS 对象时，我必须使用原型来创建一个新实例。所以这让我很困惑。

【问题讨论】：

除非你的类 extends React.Component 否则它无权访问 React 工厂。
关于你的第一个问题，你不需要（也不能）使用super，如果你不需要extend另一个类
我不同意这个问题是重复的。您提到的问题是关于在回调中访问它的状态。我在问如何将回调传递给一个类，以便它的所有函数都可以访问回调。

标签： javascript reactjs constructor callback

【解决方案1】：

第一个问题，我有一个像下面这样的“类”，它是 JS 类还是 React 类？我假设反应...

React 组件是扩展 React.Component 的 JavaScript 类。这个例子不是：它只是一个类，看起来不像实现了组件接口。

//这里需要绑定externalCallback吗？**

这取决于它的调用方式。例如，如果您要响应 click 处理程序，则需要绑定它，以便处理程序的 this 值引用组件而不是单击的元素。

【讨论】：

我展示了它是如何被调用的。它在 doXyz() 和 doXxz() 中调用
在这种情况下，不，您不必绑定 doXyz。但是如果你最终以不同的方式调用它，你就需要绑定它。

【解决方案2】：

首先：不，你的类不扩展任何类，所以你不必调用super。我认为您在混淆

class SomeComponent extends React.Component {
  constructor(props) {
    super(props)
    ...
  }
}

其次，取决于您希望 this 上下文是什么 - 如果您希望它是 SomeOtherUtil 那么是的，您需要绑定它...但您可能不需要。

【讨论】：