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 值是只读属性,不可修改,单向数据流

posted @ 2019-12-01 00:14  木子蔻  阅读(717)  评论(0编辑  收藏  举报