react的组件书写方式和Fragment
程序员文章站
2024-03-26 11:24:05
...
react的组件书写方式和Fragment
函数式
//第一种写法
import React from ' react ';
function add () {
return (
<div></div>//这里写的是标签
)
};
//第二种写法
const add = function () {
return (
<div></div>
)
};
//第三种写法
const add = () =>{
return (
<div></div>
)
};
//最后要记得到处组件,然后在index.js中引入使用
export default add;
class类组件
import React from ' react ';
// class类的首字母必须大写
class add extends React.Component{
render() {// render()函数
return (
<div></div>// html结构
)
}
}
export default add;
Fragment由于每个React组件只能有一个根节点,所以要渲染多个组件的时候,需要在最外层包一个容器,如果使用div, 会生成多余的一层dom如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹
import { Fragment } from ' react '
const add = () =>{
return (
<Fragment>//相当于<></>,语法糖
<div></div>
<div></div>
</Fragment>
)
}
const add = () =>{
return (
<>
<div></div>
<div></div>
</>
)
}
上一篇: Oracle——10用户自定义函数
下一篇: rsyslog输出自定义格式日志