zoukankan      html  css  js  c++  java
  • react 父组件 向 子组件 传值

    父组件

     1 import React, { Component } from 'react';
     2 import Test from './component/test';
     3 //声明welcome组件
     4 class welcome extends Component {
     5   //声明一个构造函数
     6   constructor(props) {
     7     super(props);
     8     //this.state是定义组件状态,可理解为组件中的数据,好比Vue中的data
     9     this.state = {
    10       userName: '路飞',
    11       userAge: 19
    12     }
    13   }
    14   // react元素 一律写在render函数中
    15   render() {
    16     return (
    17       <div>
    18         <h1>welcome to the world of react</h1>
    19         {/* 在子组件中声明一个userName属性,将this.state.userName的值传递到子组件中 */}
    20         <Test userName={this.state.userName} userAge={this.state.userAge}></Test>
    21       </div>
    22     );
    23   }
    24 }
    25 //最后一定要记住 向外输出
    26 export default welcome;

    子组件

     1 import React, { Component } from 'react';
     2 
     3 class test extends Component {
     4   render() {
     5     return (
     6       <div>
     7         <h1>我是test组件</h1>
     8         {/* 在子组件中用this.props接收父组件中传递过来的值 */}
     9         {[this.props.userName, this.props.userAge]}
    10 
    11         {console.log(this.props)}
    12         {/* 通过控制台打印,this.props是传递过来的是一个对象:{userName: "路飞", userAge: 19} */}
    13       </div>
    14     );
    15   }
    16 }
    17 
    18 export default test;
  • 相关阅读:
    错误:Error:未定义标识符"_TCHAR"
    C#中DateTime应用
    随机打乱数组元素
    C++中的运算符重载
    C#中的运算符重载
    C#访问修饰符
    VS2010中将当前选定项目做为启动项
    VS2010 ctrl+F5闪退解决方法
    IntelliSense: 应输入声明的解决方案
    C++数据类型范围
  • 原文地址:https://www.cnblogs.com/TreeCTJ/p/10178296.html
Copyright © 2011-2022 走看看