React中组件道具的简单指南

DebugUsery
897 阅读5分钟

React中组件道具的简单指南

要开始使用React，你不需要学习很多东西。了解了组件、状态、道具和钩子的概念--你就知道如何使用React了。

在这篇文章中，你会读到一个简单而实用的指南，介绍如何在React组件上使用props。

1.组件的props

一个组件是一个封装好的逻辑片段。例如，这里有一个显示Hello, World! 消息的组件。

function HelloWorld() {
  return <span>Hello, World!</span>;
}

// Render
<HelloWorld />
// Output
<span>Hello, World!</span>

<HelloWorld /> 组件的问题是，它不灵活。你不能改变问候人，例如，用Joker ，而不是Earth 。

你可以通过使用组件props的概念来解决这个问题。

让我们通过添加一个道具who ，使<HelloWorld /> 组件更加灵活。who 允许对被问候的人进行分类。让我们把这个新的组件命名为<Hello> 。

有两个步骤可以将who这个道具添加到<Message> 组件中。

1）让你的组件的函数从props 参数中读取道具。

function Hello(props) {
  return <div>Hello, {props.who}!</div>;
}

现在Hello 函数有一个参数props 。当渲染组件时，React将确保把你分配给组件的所有道具分配给props 对象。

2) 渲染组件时，使用类似属性的语法who="Earth" ，将道具添加到组件中。

// Render
<Hello who="Earth" />
// Output
<div>Hello, Earth!</div>

你可以使用任何你想用的who 道具值。例如，让我们问候一下Mars!


// Render
<Hello who="Mars" />
// Output
<div>Hello, Mars!</div>

这就是你为了使用React道具所需要知道的一切

1.1 多个道具

当然，你可以使用你喜欢的多个道具。让我们让<Message> 组件接受2个道具来定制问候信息，以及问候人。

function Message({ greet, who }) {
  return <div>{greet}, {who}!</div>;
}

// Render
<Message greet="Welcome" who="Aliens" />
// Output
<div>Welcome, Aliens!</div>

1.2 类组件道具

如果你使用基于类的组件，那么你可以从组件实例的this.props 属性中访问这些道具。

import { Component } from 'react';
class HelloAsClass extends Component {
  render() {
    return <div>Hello, {this.props.who}!</div>;
  }
}

为类组件设置道具值与为功能组件设置道具值是一样的。

// Render
<HelloAsClass who="Earth" />
// Output
    <div>Hello, Earth!</div>

2.道具的值

在前面的大多数例子中，props的值是字符串。但往往你想把道具设置为数字、布尔、对象、数组，甚至变量等值。

React对一个道具可以有什么值没有任何限制。但是所有的值，除了双引号的字符串字头，都必须用大括号包裹prop={value} 。

使用下面的指南，在你的组件上设置不同类型的值。

  1. 字符串字元
<MyComponent prop="My String Value">
  1. 带有变量的模板字面符号
<MyComponent prop={`My String Value ${myVariable}`}>

3.数字字样

<MyComponent prop={42} />
  1. 布尔型字词
<MyComponent prop={false} />
  1. 普通对象的字面意义
<MyComponent prop={{ property: 'Value' }} />
  1. 数组字样
<MyComponent prop={['Item 1', 'Item 2']} />
  1. JSX
<MyComponent prop={<Message who="Joker" />} />
  1. 具有任何类型的值的变量
<MyComponent prop={myVariable} />

3.传递props

在组件内部，你可以像使用任何常规的JavaScript变量一样使用props。你可以有条件地渲染，或者你甚至可以把道具传递给其他组件。

例如，让我们创建一个组件<HelloPeople /> ，接受一个人的列表。这个组件将把每个人传递给<Hello> 。

function HelloPeople({ persons }) {
  return (
    <div>
      {persons.map((person, index) => {
        return <Hello who={person} key={index} />;
      })}
    </div>
  );
}

<HelloPeople persons={persons} /> 接受一个道具 persons，这是一个字符串数组。在这个组件中，人员列表被迭代，每个人都被映射到<Hello who={person} /> 组件中。这样一来，道具就可以向下传递给子组件。 `

// Render
<HelloPeople persons={['Joker', 'Batman']} />
// Output
<div>
  <div>Hello, Joker!</div>
  <div>Hello, Batman!</div>
</div>

4.可选的道具

有些情况下，你有一个很好的道具的默认值。在这种情况下，你可以完全省略该道具。

但是，在访问组件内的道具时，一定要注明默认值。

例如，让我们把<HelloOptional /> 组件中的who 道具作为可选项，但默认为'Unknown' 。

function HelloOptional({ who = 'Unknown' }) {
  return <div>Hello, {who}!</div>;
}

看一下参数destructuring{ who = 'Unknown' } ，你会注意到，如果没有指明who prop，那么它就默认为'Unknown' 值。太好了!

// Render
<HelloOptional />
// Output
<div>Hello, Unknown!</div>

然而，如果指明了，who 接受实际值。

// Render
<HelloOptional who="Batman" />
// Output
<div>Hello, Batman!</div>

5.道具传播语法

如果你动态地构建一个组件的道具，你可能会在一个普通的JavaScript对象里面持有该组件的道具。

例如，让我们定义一个对象hiBatman ，其属性为greet 和who 。

const hiBatman = { greet: 'Hi', who: 'Batman' };
function Message({ greet, who }) {
  return <div>{greet}, {who}!</div>;
}

然后，在设置组件的道具时，就不用手动列举这些道具了。

// Render
<Message greet={hiBatman.greet} who={hiBatman.who} />
// Output
<div>Hi, Batman!</div>

你可以简单地使用传播语法<Message {...hiBatman} /> 。

// Render
<Message {...hiBatman} />
// Output
<div>Hi, Batman!</div>

传播对象中的属性名称必须与道具名称相对应。

6.特殊道具

虽然你可以自由地使用任何你喜欢的道具名称，然而React有一些具有特殊用途的属性。

6.1children

children 是一个特殊的属性，由React分配给组件主体的内容：开放标签 和关闭标签 之间的内容。<MyComponent> </MyComponent>

function Parent({ children }) {
  console.log(children); // logs <span>I'm a child!</span>
  return <div>{children}</div>;
}

// Render
<Parent>
  <span>I'm a child!</span>
</Parent>
// Output
<div><span>I'm a child!</span></div>

6.2关键

如果你记得<HelloPeople persons={persons} /> 组件。

function HelloPeople({ persons }) {
  return (
    <div>
      {persons.map((person, index) => {
        return <Hello who={person} key={index} />;
      })}
    </div>
  );
}

<Hello who={person} key={index} /> 使用了特殊的 key道具。它允许React更快地对数组项目进行更新。

7.结语

道具是一种你可以编写可重复使用的UI逻辑片段的方式。道具作为组件的输入。

使用道具是非常简单的。

首先，确保你的组件从props参数中读取props（如果是类组件，则是this.props ）。

function MyComponent({ prop }) {
  return <div>Prop value: {prop}</div>;
}

然后，在JSX中渲染组件时，确保使用类似属性的语法来设置道具值:prop="My Value":

// Render
<MyComponent prop="My Value" />
// Output
<div>Prop value: My Value</div>
avatar
文章
阅读
粉丝