10个方便的React.js代码片段用于您的项目
推荐超级课程：
@TOC
这里有10个有用的React.js代码片段，可以在各种场景中派上用场。您可以根据需要适应并在您的React项目中使用这些片段：
- 创建一个功能组件：
import React from ‘react’;
function MyComponent() {
return <div>Hello, React!</div>;
}
export default MyComponent;
- 在组件中使用Props：
function Greeting(props) {
return <div>Hello, {props.name}!</div>;
}
- 使用useState钩子处理状态：
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
Count: {count}
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
- 遍历数组以渲染组件：
const items = ['Item 1', 'Item 2', 'Item 3'];
const ItemList = () => (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
- 使用三元运算符进行条件渲染：
function Message({ isLoggedIn }) {
return (
<div>
{isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
</div>
);
}
- 使用状态处理表单输入：
import React, { useState } from 'react';
function TextInput() {
const [inputValue, setInputValue] = useState('');
const handleChange = (e) => {
setInputValue(e.target.value);
};
return (
<input type="text" value={inputValue} onChange={handleChange} placeholder="Enter text" />
);
}
- 使用useEffect从API获取数据：
import React, { useEffect, useState } from ‘react’;
function DataFetching() {
const [data, setData] = useState([]);
useEffect(() => {
fetch(’[https://api.example.com/data’](https://api.example.com/data'))
.then((response) => response.json())
.then((data) => setData(data));
}, []);
return <div>{/* 在这里渲染数据 */}</div>;
}
- 使用React Router进行路由：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
return (
<Router>
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</Router>
);
}
- 有条件地添加CSS类：
function Button({ isPrimary }) {
const className = isPrimary ? ‘primary-button’ : ‘secondary-button’;
return <button className={className}>Click me</button>;
}
- 处理点击事件：
function handleClick() {
alert('Button clicked!');
}
function ClickButton() {
return <button onClick={handleClick}>Click me</button>;
}
这些代码片段涵盖了常见的React.js用例。请根据您的具体项目需求进行定制。