主页 » React 教程 » React 属性

React 属性

摘要:在本教程中，您将了解 React 属性以及如何使用属性系统在 React 组件之间传递数据。

React 属性介绍

React 属性是一种机制，允许您在 React 应用程序中将数据从一个组件传递到另一个组件。

我们将构建一个简单的 React 应用程序来说明 React 属性系统的工作原理。该应用程序将显示三本书，包括书籍封面、标题和作者。

在这个 book 应用程序中，我们有三个结构相同的书籍。

  • 封面图片
  • 书名
  • 作者

在 React 中，您可以返回相同版本的 JSX 并更改封面图片、书名和作者。

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>

      <section>
        <img />
        <h2>Mastering React</h2>
        <p>By Anthony Pham</p>
      </section>
    </main>
  );
};Code language: JavaScript (javascript)

但是，最好创建一个名为 Book 的可重用组件。Book 组件应该能够显示不同的封面图片、标题和作者。

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book />
      <Book />
      <Book />
    </main>
  );
};Code language: JavaScript (javascript)

问题是如何从 App 组件传递封面图片、标题和作者等数据到每个 Book 组件。我们可以使用 React 属性系统来实现这一点。

组件层次结构

在 React 中，组件层次结构是 React 以嵌套方式排列组件的方式，形成树状结构。

  • 父组件是包含一个或多个其他组件的组件。它们将数据（属性）传递给子组件。
  • 子组件是嵌套在父组件中的组件。子组件通过属性接收来自父组件的数据。
  • 兄弟组件是指共享相同父组件的组件。它们在组件层次结构中具有相同的级别。

下图显示了我们将要创建的 React 应用程序的组件层次结构。

react component hierarchy

创建 React 应用程序

首先，在 Windows 上打开命令提示符，或在类 Unix 系统上打开终端。

其次，运行 npx create-react-app 命令创建一个名为 book 的新 React 应用程序。

npx create-react-app bookCode language: JavaScript (javascript)

第三，在您最喜欢的代码编辑器中打开项目目录，并删除 src 目录下的所有文件。

第四，使用以下代码创建一个新的 index.js 文件。

import ReactDOM from 'react-dom/client';
import App from './App.js';

const el = document.querySelector('#root');
const root = ReactDOM.createRoot(el);

root.render(<App />);Code language: JavaScript (javascript)

index.js 文件在屏幕上显示 App 组件。

第五，在存储 App 组件的相同 src 目录中创建 App.js 文件。

const App = () => {
   return <h1>Book App</h1>;
};

export default App;Code language: JavaScript (javascript)

App 组件将创建三个 Book 组件的副本，并在屏幕上显示它们。但目前，它返回一个带有文本的 <h1> 标签。

在 App.js 文件中，我们使用 默认导出

export default App;Code language: JavaScript (javascript)

在将 App 组件导入文件时，我们可以直接使用它的名称，而不使用一对花括号。

import App from './App.js';Code language: JavaScript (javascript)

如果您没有使用默认导出，而是使用命名导出，例如

export const App = () => {
  // ...
}Code language: JavaScript (javascript)

那么，您需要在导入它时用一对花括号将其括起来。

import { App } from './App.js';Code language: JavaScript (javascript)

请注意，一个模块只能有一个默认导出。

最后，通过在终端上执行以下命令来运行书籍。

npm startCode language: JavaScript (javascript)

您将在 Web 浏览器上看到以下屏幕。

创建可重用的 Book 组件

首先，在 src 目录中创建一个 Book.js 文件。

const Book = () => {
   return <p>Book</p>;
};

export default Book;Code language: JavaScript (javascript)

Book 组件返回一个简单的 <p> 元素。我们将在稍后修改它。

其次，将 Book 组件导入 App 组件，并修改 App 组件以返回 Book 组件。

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book />
      <Book />
      <Book />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

在这个组件中，

1) 导入 Book 组件

import Book from './Book';Code language: JavaScript (javascript)

2) 在 JSX 中渲染 Book 组件

<Book />Code language: JavaScript (javascript)

第三，使用属性将数据从 App 组件传递到 Book 组件。

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book title="Mastering React" author="Anthony Pham" />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

在 App 组件中，我们将 Book 组件的 title 和 author 属性设置为相应的字符串。

<Book title="Mastering React" author="Anthony Pham" />Code language: JavaScript (javascript)

在 Book 组件中，我们可以将这些值接收为 props 对象的属性。props 对象是组件函数的参数。

const Book = (props) => {
  return <p>Book</p>;
};

export default Book;Code language: JavaScript (javascript)

通过 props 对象，您可以在组件中访问 title 和 author 数据。

const book = (props) => {
  return (
    <section>
      <h2>{props.title}</h2>
      <p>By {props.author}</p>
    </section>
  );
};

export default book;Code language: JavaScript (javascript)

为了使代码更简洁，您可以使用 对象解构，将 props 对象的属性解构为单个变量。

const book = ({title, author}) => {
  return (
    <section>
      <h2>{title}</h2>
      <p>By {author}</p>
    </section>
  );
};

export default book;Code language: JavaScript (javascript)

该应用程序将在 Web 浏览器中显示如下。

第四，修改 App 组件，为返回的 JSX 添加另外两个 Book 组件，但使用不同的属性。

import Book from './Book';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <Book title="Mastering React" author="Anthony Pham" />
      <Book title="Practical React" author="Alex Johnson" />
      <Book title="React in Action" author="Bob Climo" />
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

您将看到该应用程序在屏幕上渲染三本书。

向 React 应用程序添加图片

首先，下载包含三个图片的以下 zip 文件，并将其解压缩到项目目录下的 src 目录中。

下载图片

其次，使用 import 语句将这三个图片导入 App 组件，并将它们作为属性传递给 Book 组件。

import React from 'react';
import Book from './Book';
import MasteringReact from './mastering react.svg';
import PracticalReact from './practical react.svg';
import ReactInAction from './react in action.svg';

const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <div>
        <Book
          title="Mastering React"
          author="Anthony Pham"
          cover={MasteringReact}
        />
        <Book
          title="Practical React"
          author="Alex Johnson"
          cover={PracticalReact}
        />
        <Book
          title="React in Action"
          author="Bob Climo"
          cover={ReactInAction}
        />
      </div>
    </main>
  );
};

export default App;Code language: JavaScript (javascript)

第三，修改 Book 组件以显示从 App 组件传递的图片。

const Book = ({ title, cover, author }) => {
  return (
    <section>
      <img src={cover} alt={title} />
      <h2>{title}</h2>
      <p>By {author}</p>
    </section>
  );
};

export default Book;Code language: JavaScript (javascript)

该应用程序显示了三个图片，但它们太大了。为了使其更美观，我们可以向应用程序添加一些 CSS 样式。

向 React 应用程序添加 style.css

首先，在 src 目录中创建一个新的 style.css 文件，并使用以下代码。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 1rem;
  line-height: 1.5;

  /* center*/
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
h1 {
  margin-bottom: 1.5rem;
}

.book-list {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.book-cover {
  width: 150px;
}

.book-title {
  font-size: 1.2rem;
}

.book-author {
  color: gray;
}
Code language: CSS (css)

其次，将 style.css 文件导入 App 组件，并将 App 组件的 JSX 更改为包含类名。

import React from 'react';
import Book from './Book';
import MasteringReact from './mastering react.svg';
import PracticalReact from './practical react.svg';
import ReactInAction from './react in action.svg';
import './style.css';

export const App = () => {
  return (
    <main>
      <h1>Favorite Books</h1>
      <div className="book-list">
        <Book
          title="Mastering React"
          author="Anthony Pham"
          cover={MasteringReact}
        />
        <Book
          title="Practical React"
          author="Alex Johnson"
          cover={PracticalReact}
        />
        <Book
          title="React in Action"
          author="Bob Climo"
          cover={ReactInAction}
        />
      </div>
    </main>
  );
};
Code language: JavaScript (javascript)

第三，向 Book 组件的 JSX 添加类名。

const Book = ({ title, cover, author }) => {
  return (
    <section className="book">
      <img src={cover} alt={title} className="book-cover" />
      <h2 className="book-title">{title}</h2>
      <p className="book-author">By {author}</p>
    </section>
  );
};

export default Book;Code language: JavaScript (javascript)

该应用程序将显示我们期望的结果。

React Props App - book app

总结

  • 使用 React 属性将数据从父组件传递到子组件。
本教程是否有帮助？
React JSX
之前
React JSX
接下来
React JSX Key 属性
React JSX Key Prop