在 React 中，创建和嵌套组件、添加标签和样式、显示数据、渲染条件和列表、对事件做出响应并更新界面以及在组件间共享数据是常见的任务

文章目录

- - [1. 创建和嵌套组件](#1. 创建和嵌套组件)
  - - 创建组件
    - 嵌套组件
  - [2. 添加标签和样式](#2. 添加标签和样式)
  - - 添加标签
    - 添加样式
  - [3. 显示数据](#3. 显示数据)
  - - 显示静态数据
    - 显示动态数据
  - [4. 渲染条件和列表](#4. 渲染条件和列表)
  - - 条件渲染
    - 列表渲染
  - [5. 对事件做出响应并更新界面](#5. 对事件做出响应并更新界面)
  - - 处理事件
  - [6. 在组件间共享数据](#6. 在组件间共享数据)
  - - [使用 Context API](#使用 Context API)

react

如何创建和嵌套组件

如何添加标签和样式

如何显示数据

如何渲染条件和列表

如何对事件做出响应并更新界面

如何在组件间共享数据

在 React 中，创建和嵌套组件、添加标签和样式、显示数据、渲染条件和列表、对事件做出响应并更新界面以及在组件间共享数据是常见的任务。以下是每个步骤的详细说明：

1. 创建和嵌套组件

创建组件

你可以使用函数组件或类组件来创建组件。函数组件更常用，因为它们更简洁。

js 复制代码

// Function component
function MyComponent() {
  return <div>Hello, World!</div>;
}

// Class component
class MyClassComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

嵌套组件

你可以通过在 JSX 中嵌套组件来实现这一点。

js 复制代码

function ParentComponent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  return <div>I am a child component</div>;
}

2. 添加标签和样式

添加标签

直接在 JSX 中使用 HTML 标签。

js 复制代码

function MyComponent() {
  return (
    <div>
      <h1>Title</h1>
      <p>This is a paragraph.</p>
    </div>
  );
}

添加样式

可以使用内联样式或者 CSS 类。

js 复制代码

// Inline styles
function MyComponent() {
  const style = { color: 'red', fontSize: '20px' };
  return <div style={style}>Styled Text</div>;
}

// CSS classes
import './MyComponent.css'; // Assuming you have a CSS file named MyComponent.css

function MyComponent() {
  return <div className="my-component">Styled Text</div>;
}

3. 显示数据

显示静态数据

直接在 JSX 中插入数据。

js 复制代码

const name = "John";
function MyComponent() {
  return <div>Hello, {name}!</div>;
}

显示动态数据

通过状态管理（如 useState）来显示动态数据。

js 复制代码

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

4. 渲染条件和列表

条件渲染

使用三元运算符或逻辑运算符。

js 复制代码

function MyComponent({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
    </div>
  );
}

列表渲染

使用 map 方法来渲染数组。

jsx 复制代码

const items = ['Apple', 'Banana', 'Cherry'];

function MyComponent() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

5. 对事件做出响应并更新界面

处理事件

使用事件处理器函数。

js 复制代码

function MyComponent() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

6. 在组件间共享数据

使用 Context API

Context API 允许你在组件树中传递数据而不必手动地通过每一个层级传递 props。

js 复制代码

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

function MyProvider({ children }) {
  const [state, setState] = useState('Hello, World!');
  return (
    <MyContext.Provider value={{ state, setState }}>
      {children}
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { state, setState } = useContext(MyContext);
  return (
    <div>
      <p>{state}</p>
      <button onClick={() => setState('Updated State')}>Update State</button>
    </div>
  );
}

function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

这些是 React 开发中一些基本的操作和概念。通过掌握这些技巧，你可以构建出功能丰富且高效的 React 应用。