用react的hooks版本写一个前端404的静态页面
时间: 2024-05-14 13:14:45 浏览: 21
以下是使用React Hooks实现的静态404页面代码:
```jsx
import React from "react";
const NotFound = () => {
return (
<div className="not-found">
<h1>404</h1>
<h3>Page Not Found</h3>
<p>Sorry, the page you are looking for does not exist.</p>
</div>
);
};
export default NotFound;
```
在这里,我们创建了一个名为`NotFound`的函数组件,该组件返回一个`div`元素,其中包括一个标题和一些文本,表示页面未找到。我们将此组件导出,以便在其他地方使用。
相关问题
用react hooks写一个计数器
好的,以下是使用 React Hooks 写的计数器示例:
```jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>当前计数值为: {count}</p>
<button onClick={() => setCount(count + 1)}>增加</button>
<button onClick={() => setCount(count - 1)}>减少</button>
</div>
);
}
export default Counter;
```
在上面的代码中,我们使用 `useState` Hook 来创建一个 `count` 状态和一个 `setCount` 函数。`count` 初始值为 0,然后我们将它渲染到页面上。两个按钮分别用于增加和减少计数器的值,点击按钮时会调用对应的 `setCount` 函数来更新 `count` 状态的值,并重新渲染页面。
帮我用react hooks 写一个可拖拽 放大缩小的组件
好的,我可以为您提供一个基本的可拖拽和放大缩小的组件,使用React Hooks 和 CSS transform 属性。
首先,我们需要使用 `useState` hook 来保存组件的状态。我们需要跟踪图片的位置和缩放比例。下面是一个例子:
```jsx
import React, { useState } from 'react';
function DraggableImage(props) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const [scale, setScale] = useState(1);
const handleDrag = (e) => {
setPosition({
x: position.x + e.movementX,
y: position.y + e.movementY,
});
};
const handleWheel = (e) => {
setScale(scale + e.deltaY * -0.01);
};
return (
<div
style={{
transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
}}
onDrag={handleDrag}
onWheel={handleWheel}
draggable
>
<img src={props.src} alt={props.alt} />
</div>
);
}
export default DraggableImage;
```
在这个例子中,我们创建了一个 `DraggableImage` 组件,它接受 `src` 和 `alt` 属性作为图片的来源和替换文本。我们使用 `useState` hook 来保存图片的位置和缩放比例,然后在组件中使用 `transform` 属性来设置 CSS 属性。我们还使用 `onDrag` 和 `onWheel` 事件来处理拖动和缩放。
注意,我们将 `div` 元素设置为可拖拽,而不是 `img` 元素。这是因为 `img` 元素本身不支持拖动,但是我们可以使用包装的 `div` 元素来实现拖动和缩放。
这只是一个简单的例子,您可以根据自己的需要进行更改和扩展。希望这可以帮助您开始构建您的可拖拽和缩放的组件!
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)