Question

我有两个相同级别的组件（没有所有者 - 欠者关系）。假设通过单击组件A中的“C”，我将温度单位设置为“C”，然后单击“F”，我将单位设置为“F”。在组件B中，我需要显示温度，所以我需要得到单位。但是这个信息在A中。我想知道如何访问组件A中的状态？

跟进：

在另一个也与A和B平行的组件C中，我有一个指向另一个页面的链接：

<div className="bottom_link">
     <Link to={'weather-stations/eaB1rJytnpS5mZ2m'}>view detail</Link>
</div>

我还需要将单位信息传递给该页面。我想知道推荐的方法是什么？感谢。

Answer 1

拥有组件X拥有的所有组件A，B和C，并将状态移动到那里。在组件X中有一个传递给子项的处理程序，该处理程序将在X上执行setState。

另一种方法是使用Flux方法。在这里，您将使用商店并从该共享商店的状态中读取每个组件。从F到C和后退的更改将通过动作创建者和商店处理程序完成。

第二种方法是对第一种方法的推断：你基本上是在解除第一种方法。国家通过商店进入全球范围，而你通过使用X的状态将其提升到X的范围。

通常在React中，您希望组件尽可能无状态。因此我建议使用第一种方法。然后，如果需要，您可以将状态提升到更高的位置（例如，X，Y和Z需要共享状态），A，B和C保持不变。

使用道具而不是状态会产生很好的副作用，迫使您考虑组件的API。这个组件究竟需要做什么数据来完成它的工作？然后这些要求作为道具传递。

如果我要向从React开始的人提供任何单一建议，那么只要不尽可能不使用状态。即使你认为自己需要它，你也可以经常删除它，所以你应该尽可能地努力避免状态。

我正在开发一个包含数百个组件的应用程序，而我几乎无法想到我们使用this.setState的地方

Answer 2

现在最好的方法是使用 useContext 钩子。创建一个名为 TemperatureContext.js 的新文件。在那里，您将需要以下内容：

import {createContext} from 'react'

export const Temperature = createContext(null);
//you can replace null with an initial condition

然后，在您的 app.js 文件中导入您创建的文件并创建一个 useState 值。然后，将组件 A 和组件 B 都包装在提供者标记中：

import React, {useState} from 'react'
import{Temperature} from '.TemperatureContext.js'
function App(){
const [temperature, setTemperature] = useState();

return(
<Temperature.Provider value={{temperature, setTemperature}}>
    <ComponentA>
    <ComponentB
</Temperature.Provider>
)}

然后，在您的每个组件中，您可以通过

导入温度状态

import React, {useContext} from 'react';
import{Temperature} from '.TemperatureContext.js';

function ComponentA(){
const [temperature, setTemperature] = useContext(Temperature);
const tempChange(entry)=>{
...
setTemperature(entry)
}

return(
...
)
}

现在，通过使用 ComponentA 中的 tempChange 函数，它将改变包装在 Provider 标签中的所有内容的状态。值得庆幸的是，自从发布这个问题以来，React 已经取得了长足的进步。

并行组件中的反应通过状态

2 个答案: