react 2个组件共享数据
时间: 2023-09-11 18:07:42 浏览: 55
在 React 中,可以通过将数据存储在父组件的 state 中,然后将其传递给子组件作为 props 来共享数据。子组件可以通过 props 访问该数据并使用它来渲染自己。
例如,有一个父组件,它的 state 中有一个名为 `count` 的变量:
```jsx
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<ChildComponent count={count} />
<ChildComponent count={count} />
</div>
);
}
```
然后有两个子组件,它们都需要访问父组件的 `count` 变量:
```jsx
function ChildComponent(props) {
return (
<div>
<p>Count: {props.count}</p>
</div>
);
}
```
现在,两个子组件都能够显示相同的计数值,因为它们都访问了父组件的 `count` 变量。当父组件调用 `setCount()` 更新计数值时,两个子组件都会自动重新渲染以反映新值。
这是 React 中共享数据的一种简单方法,但还有其他方法,如使用 Context 或 Redux 等状态管理库。