道具

阅读2223

更新时间2025-08-20

类组件

事件

Props 是传递给 React 组件的参数。

Props 通过 HTML 属性传递给组件。

props 代表属性。

React 道具

React Props 类似于 JavaScript 中的函数参数和 HTML 中的属性。

要将 props 发送到组件中，请使用与 HTML 属性相同的语法:

实例

向 Car 元素添加"brand"属性:

const myElement = ;

组件接收参数作为 props 对象:

实例

在组件中使用brand品牌属性:

function Car(props) {
  return I am a { props.brand }!;
}

运行实例 »

传递数据

Props 也是您将数据从一个组件传递到另一个组件的方式，作为参数。

实例

将 "brand" 属性从 Garage 组件发送到 Car 组件:

function Car(props) {
  return I am a { props.brand }!;
}

function Garage() {
  return (
    <>
      Who lives in my garage?
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

如果您要发送一个变量，而不是上面示例中的字符串，您只需将变量名放在大括号内:

实例

创建一个名为 carName 的变量并将其发送到 Car 组件:

function Car(props) {
  return I am a { props.brand }!;
}

function Garage() {
  const carName = "Ford";
  return (
    <>
      Who lives in my garage?
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

或者如果它是一个对象:

实例

创建一个名为 carInfo 的对象并将其发送到 Car 组件:

function Car(props) {
  return I am a { props.brand.model }!;
}

function Garage() {
  const carInfo = { name: "Ford", model: "Mustang" };
  return (
    <>
      Who lives in my garage?
      
    
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

运行实例 »

注意: React Props 是只读的！如果你试图改变它们的值，你会得到一个错误。