React组件的定义和使用
组件的定义
组件可以通过ES6 class语法定义，也可以通过函数定义。无论是哪种定义方式，组件都必须返回一个React元素或者null。
-
ES6 class语法定义组件：
import React from 'react';
class MyComponent extends React.Component {
render() {
return <div>Hello, World!</div>;
}
}
-
函数定义组件:
注意：React 组件是常规的 JavaScript 函数，但它们的名称必须以大写字母开头，否则将无法运行！
function MyComponent() {
return <div>Hello, World!</div>;
}
组件导出
如果我们在单独的文件中用函数来定义我们的组件，那么要用export default导出。
export default function MyComponent() {
return <div>Hello, World!</div>;
}
使用组件
在使用组件时，可以像使用普通的React元素一样使用：
<MyComponent />
React组件props的传递和使用
React组件使用props来相互通信。每个父组件都可以通过向子组件传递props来传递一些信息。你可以通过props传递任何JavaScript值，包括对象、数组和函数。
熟悉props
-
我们先来写一个子组件:
function Avatar() {
return (
<img
className="avatar"
src="http://jbook-1253664256.cos.ap-shanghai.myqcloud.com/16768532085901792.jpg"
alt="Lin Lanying"
width={100}
height={100}
/>
);
}
-
然后在父组件中使用一下子组件：
export default function App() {
return (
<Avatars />
);
}
-
从父组件里面，将数据传到子组件
export default function App() {
return (
<Avatar
person={{ name: 'Liu yifei', imageId: '1bX5QH6' }}
size={100}
/>
);
}
-
在子组件接收数据
function Avatar(props) {
//接收一个props对象，然后渲染数据
console.log('props',props)
return (
<img
className="avatar"
src="http://jbook-1253664256.cos.ap-shanghai.myqcloud.com/16768532085901792.jpg"
alt={props.person.name}
width={props.size}
height={props.size}
/>
);
}
//或者用对象解构
function Avatar({person,size}) {
console.log(person,size)
return (
<img
className="avatar"
src="http://jbook-1253664256.cos.ap-shanghai.myqcloud.com/16768532085901792.jpg"
alt={person.name}
width={size}
height={size}
/>
);
}
-
给props参数指定一个默认值
function Avatar({person,size=100}) {
console.log(person,size)
return (
<img
className="avatar"
src="http://jbook-1253664256.cos.ap-shanghai.myqcloud.com/16768532085901792.jpg"
alt={person.name}
width={size}
height={size}
/>
);
}
以上的代码，当父组件没有传size的时候，图片大小就会默认为100。但是你写了size参数但是没有传值，比如： size={}或者 size={null}时，默认值是不会生效的。
-
使用JSX扩展语法转发 props
JSX扩展语法可以将一个对象中的所有属性转发到另一个组件中。这样我们就不需要手动传递每个属性，看以下例子：
function MyComponent(props) {
return <AnotherComponent {...props} />;
}
在这个例子中，MyComponent将props对象传递给AnotherComponent。通过使用扩展语法，我们可以将props中的所有属性传递给AnotherComponent，而不需要手动传递每个属性。
还可以使用对象解构来访问props中的属性：
function MyComponent({ prop1, prop2 }) {
return <AnotherComponent prop1={prop1} prop2={prop2} />;
}
当props对象中有很多属性时。使用扩展语法可以让代码更简洁、更易读。
原文始发于微信公众号（大前端编程教学）：React组件的定义和props的传递和使用
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224184.html
