版权声明:原创不易,多多珍惜 https://cloud.tencent.com/developer/article/1454562
其实react和vue传值是一样的,都是属性传值,最近技术栈都开始用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 (
<Fragment>
<div>
<label htmlFor="inserinput">点击我聚集光标</label>
<input
id="inserinput"
className="input"
value={this.state.inputvalue}
onChange={this.handinput}
/>
<button onClick={this.handbtn}>按钮</button>
</div>
<ul>
{
this.gettoduitem()
}
</ul>
<Model content={this.state.inputvalue}/>
</Fragment>
);
}
// 把jsx里面的代码单独导出来
gettoduitem() {
return (
this.state.list.map((item, index) => {
return (
<Todulist
key={index}
content={item}
id={index}
delectitem={this.delectlist}
/>
)
})
)
}
handinput(e) {
const value = e.target.value
this.setState(() => ({
inputvalue: value
}))
}
}
export default App;
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 (
<div onClick={this.delectlist}>
{test}-- {content}
</div>
)
}
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
<Todulist
key={index}
content={item}
id={index}
delectitem={this.delectlist}
/>
class Todulist extends Component {
constructor(props) {
super(props)
this.delectlist = this.delectlist.bind(this)
}
render() {
const {content,test}=this.props
return (
<div onClick={this.delectlist}>
{test}-- {content}
/*
* 这里的content 其实就 this.props.content 父组件传递的那个名字
* /
</div>
)
}
delectlist() {
/*
* 父组件向子组件传递属性值,子组件去触发父组件方法
* 修改父组件的数据,还是只能父组件去删除,类似vue ement
* 其实这个就是ul list 的标签,点击要进行删除,但是子组件不能直接修改咋办,所以
* 父组件必须要把删除的方法传递给子组件,让子组件通知父组件,然后进行删除
* /
const {delectitem,index}=this.props
delectitem(index)
}
}
import React,{Component} from 'react';
// 实现简单的双向数据绑定
class Model extends Component{
render(){
return (
<div>
{this.props.content}
</div>
)
}
}
export default Model;