您现在的位置是:首页 > Javascript
当前栏目
React的元素和组件用法详解!
2023-03-20 14:51:55 时间
一、元素
React 的最小单位是元素,一旦创建,其子元素、属性等都无法更改。
// 假设 HTML 文件中有个元素:
<div id="root"></div>
// 创建element元素,传递给React渲染,并加载到父容器(id=root)下
const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));
二、组件
组件是有多个元素组成,可以分为 class组件
和 函数组件
。
1、class组件
// class组件
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
2、函数组件
// 普通函数 写 函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 箭头函数 写 函数组件
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
3、组件复用
// 组件App多次复用Welcome
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
4、动态构建组件
根据条件,创建不同组件。
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />,
document.getElementById('root')
);
5、map遍历构建元素
// 用数组动态构建组件
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
三、组件的属性及方法
详情,看这里!
四、参考链接:
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件