重温react-03

react组件通讯

父子组件之间通信

父组件

// 父向子组件传参// import React, { Component } from 'react'
// import ChildrenElement from './sonJsx'
// export default class fatherJsx extends Component {
//     state={
//         age:18
//     }
//     render() {
//         return (
//             <div>
//                 <div>我是父组件</div>
//                 <ChildrenElement name="张三" />
//                 <ChildrenElement age={this.state.age} />
//             </div>
//         )
//     }
// }// 子向父亲传值
import React, { Component } from 'react'
import ChildrenElement from './sonJsx'
export default class fatherJsx extends Component {getChildrenData=(data)=>{console.log(data)alert(data)}render() {return (<div>我是父组件<ChildrenElement getChildrenData={(params)=>this.getChildrenData(params)}  /></div>)}
}

子组件

// 父向子传参
// import React, { Component } from 'react'// export default class sonJsx extends Component {
//   render() {
//     return (
//       <div>子组件
//         {this.props.name}
//         {this.props.age}
//       </div>
//     )
//   }
// }// 子向父传参
import React, { Component } from 'react'
export default class sonJsx extends Component {setMessageToFather(){console.log( this.props,' this.props');this.props.getChildrenData('123456')}render() {return (<div style={{color:'red'}}>点击我向父组件传值<button onClick={()=>this.setMessageToFather()}>点击一下</button></div>)}
}

受控组件

import React, { Component } from 'react'
//  受控组件 , 需要 填写控制onchange事件的方法来修改这个状态的值 
//  例如 input textarea 
/*1、可以通过初始state中设置表单的默认值 2、每当表单的值发生变化时，调用onChange事件处理器 3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state 4、一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新
*/
export default class inputValueChange extends Component {state = {values: 1111,list: [{aa: [1,]},{aa: [1,1,]}]}changeArr() {// 将list改变成 list:[{id:1,value:1},{id:2,value:2},{id:3,value:3}]  const newList = this.state.list.reduce((acc, item, index) => {  item.aa.forEach((value, aaIndex) => {  acc.push({  id: index * item.aa.length + aaIndex + 1, value  });  });  return acc;  }, []);console.log(newList,'newListnewList');this.setState({ list: newList });  } onValueChange = (e) => {console.log(e);this.setState({values: e.target.value})}render() {return (<div><input type="text" value={this.state.values} onChange={this.onValueChange} placeholder='请输入相关的内容' /><button onClick={()=>this.changeArr()}> 点击改变数组</button></div>)}
}

prop-types校验

// 安装  prop-typesnpm install prop-types// 基本使用import PropTypes from 'prop-types';class Greeting extends React.Component {render() {return (<h1>Hello, {this.props.name}</h1>);}}//定义该组件传入的props里面的name属性类型为stringGreeting.propTypes = {name: PropTypes.string}// 所有的格式样例// Type	       Class	        Example
// String	PropType.string	  “helllo”
// Object	PropType.object	  {name: “Rohit”}
// Number	PropType.number	  10
// Boolean	PropType.bool	  true/false
// Function	PropType.func	  const say = {console.log(“hello”)}
// Symbol	PropType.symbol	  Symbol(“m”)