前端时间学习了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‘));
时间: 2024-11-03 22:28:27