react中自定义组件showToast
时间: 2024-05-01 10:15:30 浏览: 13
在React中自定义组件showToast的骤如下[^2]:
1. 首先,在components文件夹中创建一个名为Toast的文件夹,并在该文件夹中创建一个名为Toast.js的文件。
2. 在Toast.js文件中,导入React和所需的样式文件。
```javascript
import React from 'react';
import './Toast.css';
```
3. 创建一个名为Toast的函数组件,并在组件中返回要显示的内容。
```javascript
function Toast() {
return (
<div className="toast-container">
<p className="toast-message">This is a toast message</p>
</div>
);
}
```
4. 在Toast组件中,使用所需的样式和布局来定义组件的外观。
```css
.toast-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 5px;
}
.toast-message {
margin: 0;
}
```
5. 最后,在需要显示Toast组件的地方,导入Toast组件并将其放置在合适的位置。
```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Toast from './components/Toast';
ReactDOM.render(<Toast />, document.getElementById('root'));
```