zoukankan      html  css  js  c++  java
  • react基础总结篇1,定义组件实现父子组件传值

    前端时间学习了vue,这几天开始入手react了。

    react项目搭建起来之后,我们一定会定义很多个组件。同样的也会涉及到父子组件的传值。今天来整理一下这个知识。

    1,定义子组件步骤

      1,引入react。

    import React,{Component} from 'react';
    import './style.less';

      2,写组件并export default导出去用到了es6中的calss语法,提前说一下,this.props.content用来接收父组件中content的值,this.props.say用以向父组件传值执行负组件的say方法。

    export default class test extends Component {
        constructor() {
            super();
        }
    
        render() {
            return (
                <div>
                    <h1 onclick={this.props.say}>hello world</h1>
                    <p>{this.props.content}</p>
                </div>
    
            )
        }

    3.在父组件中引入子组件并且渲染同时传递给子组件值,接受子组件传递过来的方法。

    import React, {Component} from 'react';
    import  {render} from 'react-dom';
    import test from './components/test/Test';
    class Main extends Component{
      constructor(){
         super();    
      }  
     move(e){
        console.log(event.target);  
        }
     render(){
       return(
          <div>
            <Main move={this.move.bind(this)  content='666'}><Main/>
          </div>    
       )  
     }
    }    
    render(<Main/>,document.getElementById('#app'));
  • 相关阅读:
    算法导论之贪心算法
    编程过程中遇到的一些细节
    c++11和c99
    面试总结(YY一面)
    python(17):字典
    python(16):元组
    python(15):练习题
    python(14):列表
    python(13):字符串
    python(12):练习题
  • 原文地址:https://www.cnblogs.com/hjdjs/p/7217108.html
Copyright © 2011-2022 走看看