【React】React中将 Props 传递给组件
当使用 React 时，props 是组件之间传递数据的主要方式。以下是针对您提到的五个问题的详细解答：
1. 如何向组件传递 props
在父组件中，你可以通过组件标签的属性（attributes）将 props 传递给子组件。这些属性在子组件内部可以通过 props 对象来访问。
function ParentComponent() {
const name = 'Alice';
const age = 30;
return (
<ChildComponent name={name} age={age} />
);
}
function ChildComponent(props) {
return (
<div>
<p>Name: {props.name}</p>
<p>Age: {props.age}</p>
</div>
);
}
2. 如何从组件读取 props
在子组件中，你可以通过函数参数 props 来读取传递进来的 props。这些 props 是以对象的形式存在的，你可以通过点操作符（.）来访问它们的值。
function ChildComponent(props) {
// 读取 props 中的值
const { name, age } = props;
return (
<div>
<p>Name: {name}</p>
<p>Age: {age}</p>
</div>
);
}
3. 如何为 props 指定默认值
如果父组件没有传递某个 props，你可以在子组件中为它指定一个默认值。这可以通过在函数参数中解构 props 并为其指定默认值来实现。
function Welcome(props) {
const { name = 'Guest' } = props; // 如果 props 中没有 name，则默认为 'Guest'
return <h1>Hello, {name}</h1>;
}
在 ES6 中，你也可以使用解构赋值来简化代码：
function Welcome({ name = 'Guest' }) {
return <h1>Hello, {name}</h1>;
}
在上面的例子中，如果父组件没有传递 name 或 age props，那么它们将分别默认为 'Guest' 和 0。
4. 如何给组件传递 JSX
React 允许你将 JSX 作为 props 传递给组件。这通常用于像 children 这样的特殊 props，或者当你需要传递一个复杂的 UI 结构时。
function ParentComponent() {
return (
<ChildComponent>
<p>This is JSX being passed as a child</p>
</ChildComponent>
);
}
function ChildComponent(props) {
return (
<div>
{props.children} {/* 这里渲染传递进来的 JSX */}
</div>
);
}
在上面的例子中，<p>This is JSX being passed as a child</p> 作为 ChildComponent 的子元素（children prop）被传递。
5. Props 如何随时间变化
当父组件的 state 或 props 发生变化并导致重新渲染时，传递给子组件的 props 也可能会发生变化。React 通过比较新旧 props 来决定是否需要重新渲染子组件。如果 props 发生了变化，子组件将接收到新的 props 并可能触发其自己的重新渲染。
function ParentComponent() {
const [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}>Increment</button>
<ChildComponent count={count} /> {/* count prop 会随时间变化 */}
</div>
);
}
在这个例子中，每次点击Increment按钮时，ParentComponent 的 state 中的 count 都会增加，这会导致 ParentComponent 重新渲染。由于 count prop 被传递给了 ChildComponent，所以 ChildComponent 也会接收到新的 count prop 并可能触发其自身的重新渲染。
props 是 React 中组件间通信的关键机制，它们允许父组件向子组件传递数据，并且这些数据可以随时间变化而更新。