• 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'));
  • 相关阅读:
    POJ 1789
    南华大学 复读机(并查集)
    C
    F
    POJ 1988 Cube Stacking
    并查集(一)
    把采集到的数据发送到一个Google Docs或者Google Form上 这个网站提供了参考和例子
    几种空气颗粒物和空气质量传感器
    整流桥
    STM32 中的CEC
  • 原文地址:https://www.cnblogs.com/hjdjs/p/7217108.html
Copyright © 2020-2023  润新知