React.js 渲染道具

React.js 是一种流行的前端 JavaScript 库，它提供了一种简单的方式来构建网页。其中一个重要的特性是组件。

组件是 React 应用程序的主要构建块。其定义了一个可render的UI。除了组件的可render的内容之外，每个组件可以还包含一个称为“道具”的对象。道具可以将外部信息传递到组件中，并根据该信息来更改组件的渲染。

使用道具

要了解如何使用道具，让我们来看一个简单的例子。在这个例子中，我们将创建一个包含一个问候信息的“欢迎”组件，并使用道具来向其传递一个名称。

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Welcome name="Marvin" />;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，我们定义了一个名为“Welcome”的函数组件。它的参数“props”包含了我们想要传递给组件的道具信息。在这个例子中，我们将一个名为“name”的道具传递给了组件。

在组件中，我们使用花括号语法来引用道具信息，例如 {props.name}。这样，当React 将组件渲染到HTML中时，“Marvin”这个文本会显示在生成的HTML中，如下所示：

<div id="root">
  <h1>Hello, Marvin!</h1>
</div>

道具的值

道具可以包含任何类型的值，包括字符串、数字、布尔、对象或函数。这些值可以在组件中使用，它们还可以在组件生命周期的任何时候更改。

注意，道具应该被视为只读的，不应在组件中更改。 但是，组件可以使用类似于事件处理程序和回调函数的机制，以道具的形式将函数传递给其子组件。

默认道具值

如果没有提供道具的值，组件可以设置一个默认值。默认值可以在组件定义中使用默认参数来设置。

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Welcome.defaultProps = {
  name: 'Stranger'
};

const element = <Welcome />;
ReactDOM.render(element, document.getElementById('root'));

在这个例子中，我们定义了一个默认名称“stranger”。在组件中，如果没有设置名称道具，它将使用默认值。因此，当在HTML中呈现该组件时，呈现出的内容将如下所示：

<div id="root">
  <h1>Hello, Stranger!</h1>
</div>

结论

React.js 的道具使您能够将信息从父组件传递到子组件，并且它们是 React 组件的重要构建块之一。使用道具可以使您的组件更加灵活和可重用，并且它们使代码更加结构化和易于管理。