【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 中组件间通信的关键机制，它们允许父组件向子组件传递数据，并且这些数据可以随时间变化而更新。