React父子组件传值

其实react和vue传值是一样的,都是属性传值,最近技术栈都开始用react 了,第一个就是基于环信做一个即时通讯,到时候我也会上传代码进行分享

  1. 第一步搭建最简单的react环境,搭建最简单的环境我也写过 地址在这里
  2. 以下是基本的创建react 的代码
import React, { Component, Fragment } from 'react';
import './style.css'
import Todulist from './Todulist'
/*
* Todulist 就是子组件,
* Model  就属性传值的用法,然后就可以实现属性双向绑定
* /
import Model from './Model'

class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			inputvalue: '',
			list: []
		}
		// 一开始就进行绑定this 指向
		this.handinput = this.handinput.bind(this)
		this.handbtn = this.handbtn.bind(this)
		this.delectlist = this.delectlist.bind(this)
	}
	render() {
		return (
			
				
    { this.gettoduitem() }
); } // 把jsx里面的代码单独导出来 gettoduitem() { return ( this.state.list.map((item, index) => { return ( ) }) ) } handinput(e) { const value = e.target.value this.setState(() => ({ inputvalue: value })) } } export default App;
  1. 然后查看子组件传值
import React, { Component } from 'react'
import propTypes from 'prop-types'
/*
*propTypes 检查数据类型
*/
class Todulist extends Component {
    constructor(props) {
        super(props)
        this.delectlist = this.delectlist.bind(this)
    }
    render() {
        const {content,test}=this.props
        return (
            
{test}-- {content}
) } delectlist() { // 父组件向子组件传递属性值,子组件去触发父组件方法 // 修改父组件的数据,还是只能父组件去删除,类似vue ement const {delectitem,index}=this.props delectitem(index) // this.props.delectitem(this.props.id) } } // 检查数据传递类型 // isRequired 必须传递,否则会报警告 Todulist.propTypes={ test:propTypes.string.isRequired, content:propTypes.string, delectitem:propTypes.func, index:propTypes.number, } // 设置属性默认值 Todulist.defaultProps={ test:'666' } export default Todulist
  • 父组件传递子组件 通过 组件属性挂载传值,比如content 代表传递过去属性接收值得名,item 代表父组件要传递的数据
       
  • 子组件不能直接修改父组件的值,遵从单项数据流思想,只能子组件通知父组件自己去进行增删改查
  class Todulist extends Component {
    constructor(props) {
        super(props)
        this.delectlist = this.delectlist.bind(this)
    }
    render() {
        const {content,test}=this.props
        
        return (
            
{test}-- {content} /* * 这里的content 其实就 this.props.content 父组件传递的那个名字 * /
) } delectlist() { /* * 父组件向子组件传递属性值,子组件去触发父组件方法 * 修改父组件的数据,还是只能父组件去删除,类似vue ement * 其实这个就是ul list 的标签,点击要进行删除,但是子组件不能直接修改咋办,所以 * 父组件必须要把删除的方法传递给子组件,让子组件通知父组件,然后进行删除 * / const {delectitem,index}=this.props delectitem(index) } }
  • 如果要实现react 的双向绑定其实也简单
import React,{Component} from  'react';

// 实现简单的双向数据绑定
class Model extends Component{
    render(){
        return (
            
{this.props.content}
) } } export default Model;
  • 你把这个 Model 组件放在父组件的下面,进行传递你要输入的值就进行简单的数据绑定了
    文笔不好,多多见谅,有问题可以咨询我微信
    React父子组件传值_第1张图片

你可能感兴趣的:(React,前端小基础)