组件和页面之间相互传值
时间: 2023-12-03 16:44:31 浏览: 61
在 React 中,可以通过 props 和 state 来实现组件和页面之间的相互传值。
1. Props:是一种从父组件向子组件传递数据的方式。在父组件中使用子组件时,可以通过给子组件添加属性(props)来传递数据。子组件可以在其内部使用 props 来访问这些数据。
2. State:是一种在组件内部存储数据的方式。可以通过 setState() 方法来更新组件的 state。当 state 发生改变时,组件会重新渲染,并且传递给子组件的 props 也会随之更新。
以下是一个简单的示例,展示了如何通过 props 和 state 实现组件和页面之间的相互传值:
```
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
function ParentComponent() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
<ChildComponent count={count} />
</div>
);
}
// 子组件
import React from 'react';
function ChildComponent(props) {
return <p>Count from parent component: {props.count}</p>;
}
```
在这个示例中,父组件维护了一个名为 count 的 state,同时将其作为 props 传递给子组件 ChildComponent。子组件通过 props 访问 count,并将其展示在页面上。当父组件中的 count 发生改变时,子组件也会随之更新。