码迷,mamicode.com
首页 > 其他好文 > 详细

react基础总结篇1,定义组件实现父子组件传值

时间:2017-07-21 14:09:05      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:content   并且   ext   语法   nts   bsp   click   ntb   default   

前端时间学习了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‘));

 

react基础总结篇1,定义组件实现父子组件传值

标签:content   并且   ext   语法   nts   bsp   click   ntb   default   

原文地址:http://www.cnblogs.com/hjdjs/p/7217108.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!