react组件传值,props,父传子，字传父

react组件分为函数式组件，类组件，类组件通过 constructor中的state来保存数据

class CommentList extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     msg:"hello"
   }
 }
 render() {
   return (
     <div>
   		<p>{this.state.msg}</>   //hello
     </div>
   );
 }
}

函数式组件通过hooks中的useState来保存数据

function Example() {
 // 声明一个叫 "count" 的 state 变量
 const [count, setCount] = useState(0); //定义变量count,改变count的函数是setCount,默认值是0

 return (
   <div>
     <p>You clicked {count} times</p>
     <button onClick={() => setCount(count + 1)}>
       Click me
     </button>
   </div>
 );
}

组件传值：props 父传子

props 是组件对外的接口。接收外部传入的数据。是组件的属性（等同于html标签的属性）。
注意：Props对于使用它的组件内部来说，是只读的。一旦赋值不能修改。
props可以有默认值

1. sex = props.sex || “女”;
2. defaultProps

defaultProps格式：

//1）、函数式组件和类组件都可以：

组件名.defaultProps={
   属性名: 默认值
}

//2)、若为类组件，也可以在类的内部使用static修饰。

static defaultProps={
   属性名: 默认值
}

组件内部使用

函数式组件

function MyPerson(props){

let sex = props.sex || "女"; //假如没有传值。默认为 "女"
	return (
		<div>
			<p>{props.name}</p>
			<p>{props.sex}</p>
		</div>
	)
}
ReactDOM.render(
	<MyPerson name="张三疯" sex="男"/>,
	document.getElementById('box')
);

类组件

class MyPerson extends React.Component{
	render(){
		return (
			<div>
				<p>{this.props.name}</p>
				<p>{this.props.sex}</p>
			</div>
		)
	}
}
ReactDOM.render(
	<MyPerson name="张三疯" sex="男"/>,
	document.getElementById('box')
);

**如果传递数据多的话，可以使用对象，但是必须使用扩展运算符（…) **
props还有类型检查（此处在不多赘述）；

子传父

父组件通过props向子组件传入一个方法，子组件在通过调用该方法，将数据以参数的形式传给父组件，父组件可以在该方法中对传入的数据进行处理；

//父组件
import Child from './Child.js'；
export default class Parent extend compenent{
  getData=(data)=>{
    console.log(data);
  }
  render(){
    return (
      <div>
        父组件
        <Child getData={this.getData}/>
      </div>
    )
  }
}

//子组件
export default class Child extend compenent{
  state={
    data:[1,2,3]
  }
  render(){
    const {data}=this.state;
    return (
      <div>
        子组件
        <button onClick={()=>{this.props.getData(data)}}><button>
      </div>
    )
  }
}