React中关于props的那些事

props是react中算是基础知识吧，熟练掌握props可以让我们在使用React的时候更方便快捷的书写项目，传值也会更方便，下面是我个人总结所学的知识整理的props的六个使用场景

第一种
传值：基础数据类型

//父组件
import Reacr, { Component } from 'react';
//引入我们的子组件
import Child from "./Child"
class View extends Component{render() {return (<div><h3>这是关于props的应用</h3>{/* 这类一般用于二级导航的标题头 */}<Child title="热门名师" /> </div>)
}
}
export default View;//子组件的内容
import React, { Component } from "react";
class View extends Component{render() {return (<div>{this.props.title}</div>)}
}
export default View;

第二种
this.props.children
接收一个闭合组件的Dom内容

//父组件
import Reacr, { Component } from 'react';
//引入的子组件
import Child from "./Child"
class View extends Component{render() {return (<div>//这种一般用于二级标题的刷新，例如切换，换一换或者更多<Child title="癫疯天梯榜" ><a href="true">更多</a></Child></div>)
}
}
export default View;//子组件
import React, { Component } from "react";
class View extends Component{render() {return (<div>{/* 闭合组件的内容用children来接收 */}{this.props.children}</div>)}
}
export default View;

父组件给子组件传一个别的组件进去，一般用于点击左侧右侧显示具体内容

//父组件
import Reacr, { Component } from 'react';
import Child from "./Child"
import Right from "./right"
class View extends Component{return (<div>//把我们引入的left放进Child里<Child test="癫疯天梯榜" right={<Right />} /></div>)
}
}
export default View;//子组件
import React, { Component } from "react";
class View extends Component{render() {return (<div>//子组件props接收{this.props.right}</div>)}
}
export default View;//被引入的组件
import React, { Component } from "react";
class View extends Component{render() {return (<div><h4>这是右侧显示的内容</h4></div>)}
}
export default View;

第四种场景：传入一个方法

//父组件
import Reacr, { Component } from 'react';
import Child from "./Child"
class View extends Component{com(){return (<div>函数返回值</div>) }render() {return (<div><Child com={this.com}  /></div>)
}
}
export default View;//子组件
import React, { Component } from "react";
class View extends Component{render() {return (<div><h4>{this.props.com()}</h4></div>)}
}
export default View;

第五种：扩展运算符：｛…｝
这种方法可以做到上面所有方法能做到的事儿，算是个集合体吧

//父组件
import Reacr, { Component } from 'react';
import Child from "./Child"
import Left from "./left"
class View extends Component{com(){return (<div>函数返回值</div>) }render() {const obj = {cla: '巅峰玩家',pfi: '职业选手',com: this.com,left:<Left/>,}return (<div>//使用扩展运算符<Child {...obj}/></div>)
}
}
export default View;
//子组件
import React, { Component } from "react";
class View extends Component{render() {return (<div><h4>{this.props.com()}</h4>{this.props.cla}<br />{this.props.left}</div>)}
}
export default View;

callback子传父
父组件给子组件定义一个自定义属性传入父组件的函数，函数内使用this.setState修改state，子组件内设置一个函数用this.props接收
一般用在点击弹窗，回调事件传给父组件保存或者取消关闭弹窗

import React, { Component } from 'react';
import One from './one';
class View extends Component {constructor(props) {super(props)this.state = {hd:{name:'小红'}}}parentFn(text) {// 子组件给的数据console.log(text)this.setState({hd: {name:text}})
}render() {const { hd }=this.state;return (<div>{hd.name}{/* 子传父 */}<One callback={this.parentFn.bind(this)}/></div>)}
}
export default View;//子组件
import React, { Component } from 'react';
class View extends Component {parentHd() {this.props.callback('点击事件后传给父组件的子组件内容')}render() {return (<div>//子组件调用父组件方法去修改name值并且把自身的值传过去<input type="button" onClick={()=>{this.parentHd()}} value="子传父"/></div>)}
}
export default View;

以上就是简单的props的小内容，如有不对的地方请诸君多加指点，感谢阅读

React中关于props的那些事相关推荐

[react] React中验证props的目的是什么？
[react] React中验证props的目的是什么? 对属性进行强检验,避免运行时报错我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通 ...
[react] 为什么说React中的props是只读的？
[react] 为什么说React中的props是只读的? React 组件都必须像纯函数一样保护它们的 props 不被更改. 将react组件理解成纯函数,数据流驱动,参数传入不允许做更改扩展 ...
彻底理解react中的props
每天对自己多问几个为什么,总是有着想象不到的收获. 一个菜鸟小白的成长之路(copyer) 在react中 state 和 props是两个非常重要的属性,并且常用的属性.简单来说:都是用来保存数据 ...
React开发（164）:React中this.props.children续集
React开发（163）:React中this.props.children
react 渲染道具_在React中学习分解道具的基础
react 渲染道具 by Evelyn Chan 通过伊芙琳·陈在React中学习分解道具的基础 (Learn the basics of destructuring props in React ...
props写法_好程序员web前端培训React中事件的写法总结
好程序员web前端培训React中事件的写法总结,React的事件处理和DOM元素很相似,但是语法上是有不同的: 1.react事件采用驼峰命名法,而不是纯小写. 驼峰命名法(camelCase):命 ...
React中props与state的区别
首先,props与state是React组件的两种方法. props,可以在组件中来获取this.props的属性. var Helloreact=React.createClass({render: ...
[react] React中怎么检验props？
[react] React中怎么检验props? PropTypes 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[react] 在React中组件的props改变时更新组件的有哪些方法？
[react] 在React中组件的props改变时更新组件的有哪些方法? 新版用 getDerivedstatefromProps(nextProps){ 业务逻辑} 个人简介我是歌谣,欢迎和大家 ...

React中关于props的那些事

React中关于props的那些事相关推荐

最新文章

热门文章