React中组件的创建方式和传值
本篇文章我们来学习组件的创建,两种组件的形式,以及如何在组件直接进行通信。
两种创建形式
1.组件有两种创建形式,一种是函数的形式,一种是类的形式,具体如何操作?
在 src 下新建 components 文件夹,再新建 CompType.js ,具体代码如下:
import React from 'react';
// 函数类型的组件
export function Welcome1() {
return (
<div>
Welcome1
</div>
)
}
// 基于类的组件
export class Welcome2 extends React.Component{
render(){
return <div>Welcome2</div>
}
}
2.然后在 src -> index.js 导入组件,再使用,具体代码如下:
import { Welcome1, Welcome2 } from './components/CompType'
function App() {
return (
<div>
{/* 使用其他组件 */}
<Welcome1></Welcome1>
<Welcome2></Welcome2>
</div>
);
}
比较:
如果一个组件只根据 props 渲染页面,没有内部的 state ,我们完全可以用函数组件的形式来实现( hooks 的到来会改变这个现状)
props属性传递
根据上面的例子,如果我想给组件 Welcome1 和组件 Welcome2 添加属性,那我要怎么传递呢,请继续往下看
1.修改 CompType.js 中两种组件形式的代码如下:
// 函数类型的组件
export function Welcome1(props) {
return (
<div>
Welcome1,{props.type}
</div>
)
}
// 基于类的组件
export class Welcome2 extends React.Component{
render(){
return <div>Welcome2,{this.props.type}</div>
}
}
注意:
基于类的组件 使用 props 属性值时,要加当前 this 实例
2.继续修改 src -> index.js 导入组件的方式,代码如下:
function App() {
return (
<div>
{/* 使用其他组件 */}
<Welcome1 type="function"></Welcome1>
<Welcome2 type="class"></Welcome2>
</div>
);
}
注意:
此时传进来的 props 值是只读属性,不可修改,单向数据流