前端时间学习了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‘));
原文:http://www.cnblogs.com/hjdjs/p/7217108.html