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

文章目录

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

react
如何创建和嵌套组件
如何添加标签和样式
如何显示数据
如何渲染条件和列表
如何对事件做出响应并更新界面
如何在组件间共享数据

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

1. 创建和嵌套组件

创建组件

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

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

嵌套组件

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

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

2. 添加标签和样式

添加标签

直接在 JSX 中使用 HTML 标签。

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

添加样式

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

// 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.cssfunction MyComponent() {return <div className="my-component">Styled Text</div>;
}

3. 显示数据

显示静态数据

直接在 JSX 中插入数据。

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

显示动态数据

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

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. 渲染条件和列表

条件渲染

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

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

列表渲染

使用 map 方法来渲染数组。

const items = ['Apple', 'Banana', 'Cherry'];function MyComponent() {return (<ul>{items.map((item, index) => (<li key={index}>{item}</li>))}</ul>);
}

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

处理事件

使用事件处理器函数。

function MyComponent() {const handleClick = () => {alert('Button clicked!');};return <button onClick={handleClick}>Click me</button>;
}

6. 在组件间共享数据

使用 Context API

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

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>);
}