zoukankan      html  css  js  c++  java
  • 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 值是只读属性,不可修改,单向数据流

  • 相关阅读:
    BZOJ 2212/BZOJ 3702
    BZOJ 4761 Cow Navigation
    BZOJ 3209 花神的数论题
    BZOJ 4760 Hoof, Paper, Scissors
    BZOJ 3620 似乎在梦中见过的样子
    BZOJ 3940 Censoring
    BZOJ 3942 Censoring
    BZOJ 3571 画框
    BZOJ 1937 最小生成树
    BZOJ 1058 报表统计
  • 原文地址:https://www.cnblogs.com/-muzi/p/11964732.html
Copyright © 2011-2022 走看看