首页 > 代码库 > react基础总结篇1，定义组件实现父子组件传值

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

2024-11-01 19:03:02   205人阅读

前端时间学习了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，定义组件实现父子组件传值


联系
我们