phpalert题目技巧_React实战案例创建并运用Alert组件

// Alert.tsxexport default function Alert() { return ( <div> <div> <span role="img" aria-label="Warning">⚠️</span> <span>警告！
</span> </div> <div>辰火流光的React学习之路 ...</div> </div> );}

该组件包含一个图标、一个标题和一段笔墨。
我们利用 export default 来导出组件，以便在其他文件中利用它。

须要把稳的是，React组件的名称必须以大写字母开头。
如果组件名称以小写字母开头，React会将其视为DOM元素，而不是自定义的React组件。

其余，我们也可以利用箭头函数语法来定义React组件。
以下是利用箭头函数语法定义的Alert组件：

// Alert.tsxconst Alert = () => { return ( <div> <div> <span role="img" aria-label="Warning">⚠️</span> <span>警告！
</span> </div> <div>辰火流光的React学习之路 ...</div> </div> );};export default Alert;

在React函数组件中，箭头函数和普通函数并没有显著的差异。
你可以根据自己的喜好来选择利用哪种函数语法。
我个人更方向于利用普通函数语法，由于它须要输入的字符较少。

创建了Alert组件之后，下一步便是将它添加到主运用中。
我们将在 App.tsx 文件中引入并利用Alert组件。

// App.tsximport Alert from "./components/Alert.tsx";function App() { return ( <> <Alert/> </> )}export default App

首先，须要在 App.tsx 文件的顶部引入Alert组件。
我们可以利用ES6的模块导入语法（import）来实现这一点：

然后，可以在App组件的返回值中利用 <Alert/> 标签来利用Alert组件。
这里，我们利用了React的Fragment（<>...</>）语法，它可以让我们返回多个元素，而不须要添加额外的父元素。

现在，当我们在浏览器中打开运用时，就可以看到Alert组件的内容了。

利用props定制Alert组件

可以利用props（属性）来通报数据，从而定制组件的行为和显示。
接下来，将在Alert组件中利用props，让它能够显示不同类型的警告信息。

首先，我们须要定义一个接口（AlertProps）来描述我们的props。
这个接口包含三个属性：type、heading和children。
type属性表示警告的类型，可以是info或warning；heading属性表示警告的标题；children属性表示警告的内容。

然后，我们可以在Alert组件中利用这些props：

// Alert.tsximport { ReactNode } from "react";interface AlertProps { type: 'info' | 'warning', heading: string, children: ReactNode}export default function Alert(props: AlertProps) { return ( <div> <div> <span role="img" aria-label={ props.type === "warning" ? "Warning" : "Information" } > {props.type === "warning" ? "⚠️" : "ℹ️"} </span> <span>{props.heading}</span> </div> <div>{props.children}</div> </div> );}

在利用Alert组件时，我们可以通过属性来通报数据：

// App.tsximport Alert from "./components/Alert.tsx";function App() { return ( <> <Alert type="info" heading="成功"> 辰火流光的React学习之路！
</Alert> </> )}export default App

在浏览器中的效果

利用ES6的解构赋值语法来简化我们的代码。
解构赋值可以让我们直接从工具中提取属性，而不须要通过工具名来访问这些属性：

export default function Alert({type,heading,children}: AlertProps) { // ...}

为props供应默认值。
例如，我们可以将type属性的默认值设置为info：

// Alert.tsxinterface AlertProps { type?: 'info' | 'warning', // 1. 在type后增加问号，表示这个属性是可选的 // ...}// 2. 在解构的type中增加默认值export default function Alert({type='info',heading,children}: AlertProps) { // ...}

之后调用Alert组件时可以去掉type属性

// App.tsximport Alert from "./components/Alert.tsx";function App() { return ( <> <Alert heading="成功"> <- 这里去掉了type属性 辰火流光的React学习之路！
</Alert> </> )}export default App

浏览器中的效果

利用State

在React中，利用state（状态）来保存和管理组件的内部数据。
接下来，我们将在我们的Alert组件中利用state，让它能够根据状态的变革动态地更新显示。

示例代码

// ...export default function Alert({type='info',heading,children}: AlertProps) { const [visible, setVisible] = useState(true); // 1.创建useState // 2. 若visible为false则返回null if(!visible){ return null; } // ...}

首先，须要利用useState函数来创建一个状态变量（visible）和一个更新函数（setVisible）。
visible变量用来表示Alert组件是否可见，setVisible函数用来更新visible的值：

const [visible, setVisible] = useState(true);

然后，我们可以在组件的渲染函数中利用visible变量。
如果visible为false，那么我们就返回null，这样Alert组件就不会被渲染出来：

if(!visible){ return null; }增加关闭按钮

我们将在Alert组件中添加一个关闭按钮。
首先，在AlertProps接口中添加一个closable属性，用来表示是否显示关闭按钮：

// Alert.tsxinterface AlertProps { type?: 'info' | 'warning', heading: string, children: ReactNode, closable: boolean // 1. 增加关闭按钮类型声明}// 2. 解构出closableexport default function Alert({type = 'info', heading, children, closable}: AlertProps) { // ...}

然后，在组件的渲染函数中利用closable属性。
如果closable为true，那么我们就渲染出关闭按钮：

// Alert.tsx// ...export default function Alert({type = 'info', heading, children, closable}: AlertProps) { // ... <!-- 这里利用closable是否显示关闭按钮 --> {closable && ( <button aria-label="Close"> <span role="img" aria-label="Close">❌</span> </button> )}}

在利用Alert组件时，我们可以通过closable属性来掌握是否显示关闭按钮，个中closable终极会被渲染成closable={true}，以是两者写法同等：

import Alert from "./components/Alert.tsx";function App() { return ( <> <Alert heading="成功" closable> 辰火流光的React学习之路！
</Alert> </> )}export default App

在浏览器中的效果

增加关闭按钮点击事宜

接下来，我们将在我们的Alert组件中添加一个关闭按钮的点击事宜，让用户可以通过点击关闭按钮来隐蔽Alert组件。

首先，我们须要在Alert组件中定义一个事宜处理函数（handleCloseClick）。
这个函数会在用户点击关闭按钮时被调用，它的浸染是将visible状态变量的值设置为false。

然后，我们可以在关闭按钮的元素上添加一个onClick属性，将它的值设置为handleCloseClick函数。
这样，当用户点击关闭按钮时，handleCloseClick函数就会被调用：

// ...export default function Alert({type = 'info', heading, children, closable}: AlertProps) { const [visible, setVisible] = useState(true); // 1.声明点击事宜，改为visible的值 function handleCloseClick(){ setVisible(false) } return ( // ... {closable && ( <button aria-label="Close" onClick={handleCloseClick}> <- 2。
然后，我们可以在关闭按钮的元素上添加一个onClick属性，将它的值设置为handleCloseClick函数。
这样，当用户点击关闭按钮时，handleCloseClick函数就会被调用：调用点击事宜 <span role="img" aria-label="Close">❌</span> </button> )} // ... );}

在浏览器中的效果

实现关闭按钮点击事宜的回调

我们将在Alert组件中添加一个onClose属性，让用户可以在Alert组件被关闭时实行自定义的操作。

首先，我们须要在AlertProps接口中添加一个onClose属性，它的类型是一个没有参数也没有返回值的函数：

然后，我们可以在handleCloseClick函数中调用onClose函数。
我们须要先检讨onClose是否存在，如果存在，那么我们就调用它：

// Alert.tsx文件interface AlertProps { // ... // 1.增加函数类型字段 onClose: () => void}// 2.props中增加onClose解构export default function Alert({type = 'info', heading, children, closable, onClose}: AlertProps) { // ... function handleCloseClick() { setVisible(false) // 3.如果onClose存在就调用它 if(onClose){ onClose() } } // ...}

在利用Alert组件时，我们可以通过onClose属性来通报一个函数，这个函数会在Alert组件被关闭时被调用：

// App.tsx文件import Alert from "./components/Alert.tsx";function App() { return ( <> <Alert heading="成功" closable={true} onClose={() => { <- 这里增加onClose属性，通报一个函数，在掌握台打印信息 console.log('我被关闭了') }} > 辰火流光的React学习之路！
</Alert> </> )}export default App

在浏览器中的效果