补充知识点
1==》
npm install prop-types 先安装参数校验包
在B C页面引入
import PropTypes from 'prop-types' //参数限制 // 验证 参数必要性 B页面 static propTypes = { len: PropTypes.number.isRequired, addtod: PropTypes.func.isRequired } // 验证 参数必要性C页面 static propTypes = { todolist: PropTypes.array.isRequired }
关于todelist的总结
1==》将数据放在父组件中
constructor(props){ super(props); this.state={ todolist:[ { id: 1, text: "web111" }, { id: 2, text: "web222" }, { id: 3, text: "web333" } ] } }
2==》将父组件中的数据 传递给子组件(父传子)
let { todolist}=this.state; //结构 <C todolist={todolist}></C>
3==》子组件进行渲染
render() { let { todolist } = this.props; console.log("值传递过来",todolist) return ( <ul> {todolist.map((item,index)=>{ return <li key={index}>{item.text}</li> })} </ul> ) }
4==》将父组件的长度 传递给子组件
<B len={todolist.length} addtod={this.addtod}></B> 父
5==》 子组件进行渲染
render() { let { len}=this.props return ( <div> <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button> </div> ) }
6==》点击按钮获取到值
render() { let { len}=this.props return ( <div> <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button> </div> ) } add=()=>{ console.log(this.refs.conn.value) let uservalu = this.refs.conn.value; //获取值 let {addtod}=this.props;//父组件想子组件传递了一个方法 addtod(uservalu) //调用这个方法 this.refs.conn.value=""; //清空 }
7==》父组件给子组件传递方法
8==》子组件调用父组件的方法 并且返回表单中的内容
9==》父组件接受子组件中返回来的数据 更改state
以下是完整代码
A.js 标题
import React, { Component } from "react" export default class A extends Component { render() { return ( <div>我是标题 todo list</div> ) } }
B.js 表单和按钮
import React, { Component } from "react" export default class B extends Component { add=()=>{ console.log(this.refs.conn.value) let uservalu = this.refs.conn.value; //获取值 let {addtod}=this.props;//父组件想子组件传递了一个方法 addtod(uservalu) //调用这个方法 this.refs.conn.value=""; //清空 } render() { let { len}=this.props return ( <div> <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button> </div> ) } }
C.js 渲染
import React, { Component } from "react" export default class C extends Component { // constructor(props){ // super(props); // let { todolist}=this.props; // } render() { let { todolist } = this.props; //它等价于上面的哪一个内容 console.log("值传递过来",todolist) return ( <ul> {todolist.map((item,index)=>{ return <li key={index}>{item.text}</li> })} </ul> ) } }
最大父组件DoAddList.js
import React, { Component } from "react" // 引入组件 import A from "./A" import B from "./B" import C from "./C" export default class DoAddList extends Component { constructor(props){ super(props); this.state={ todolist:[ { id: 1, text: "web111" }, { id: 2, text: "web222" }, { id: 3, text: "web333" } ] } } addtod=(data)=>{ let con=this.state.todolist; con.unshift({ id: this.state.todolist.length + 1, text: data }) // 跟新状态 this.setState({ todolist: con }) } render() { let { todolist}=this.state; //结构 return ( <div> <A></A> {/* 将右边的{this.addtod 方法传递给子组件 */} <B len={todolist.length} addtod={this.addtod}></B> {/*将父组件中的数据 传递给子组件(父传子)*/} <C todolist={todolist}></C> </div> ) } }
