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

react基础总结篇1,定义组件实现父子组件传值的相关文章

【vue】父组件主动调用子组件 /// 非父子组件传值

一  父组件主动调用子组件: 注意:在父组件使用子组件的标签上注入ref属性,例如: <div id="home"> <v-header ref="header"></v-header> <hr> 首页组件 <button @click="getChildData()">获取子组件的数据和方法</button> </div> 父组件主动获取子组件的数据和方法: 1

子组件以及父子组件之间的传参

子组件 栗子: 需要注意的点都在代码中注释标出来了 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box

vue 父子组件与父子组件之间的通信

<!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <div id="app"> <input type="text" v-model=&q

vue.js基础知识篇(6):组件详解

第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

2017.11.30 React基础语法之一组件

1.推荐一个React学习中文网站:http://www.css88.com/react/ 2.使用jsx来将代码封装成React组件,然后像插入普通 HTML 标签一样,在其他地方插入这个组件.使用React.createClass用于生成一个组件 var MyComponent=React.createClass({ render: function() { return <h1>Hello world!</h1>; } }); ReactDOM.render( <MyC

React基础篇(2) -- state&amp;props&amp;refs

内容简介 state props refs 行内样式及动态类名 state 基本介绍 React 把组件看成是一个状态机(State Machines).通过与用户的交互,实现不同状态,然后渲染 UI,让用户界面和数据保持一致. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). 初始化状态: constructor() { super() this.state = { stateName1 : stateValue1, stateNam

vue知识总结第一篇vue组件的定义以及父子组件的传值。

vue中是一个.vue结尾的vue文件其中包括<template>标签里边写html,而react是在render函数中..script用来写js,style中用来写css.那么我们来看看vue是怎么写的吧 子组件中 1,用export default 导出子组件,其中标红的是用来父子组件传值的this.$emit('reChild')指发送一个自定事件到父组件中,父组件中只要在引入这个子组件标签的时候v-on:reChild="rece"其中rece为父组件中method

React篇-子组件调用父组件方法

react 中子组件调用父组件的方法,通过props: 父组件: <div className="tabC01"> <FTab tabCon={'tabCon01'} note={()=>this.isNote()}/></div> 子组件: <span className="wh01" >股票持仓(前十)<img src={require("../../image/[email protecte

react基础篇四

列表 & Keys 渲染多个组件 你可以通过使用{}在JSX内构建一个元素集合 下面,我们使用Javascript中的map()方法遍历numbers数组.对数组中的每个元素返回<li>标签,最后我们得到一个数组listItems 我们把整个listItems插入到ul元素中,然后渲染进DOM: ReactDOM.render( <ul>{listItems}</ul>, document.getElementById('root') ); function N