react props 父组件向子组件传参

基本用法

父组件通过在组件上绑定属性，向子组件传递参数，所有的类型基本上都可以传，函数，对象，数组，基本参数类型等

只不过传递非字符串参数必须通过js所以得加{}
标签里面的内容，可以在子组件中通过调用this.props.children得到
绑定在标签上的参数，可以通过在子组件中调用this.props得到

function App() {
  return (
    <div>
      <PropsChildren name="小李" 
      age={20} 
      other={{sex:'男',love:'杨',fu:() => {console.log('这是传给子组件的方法')}}}>
        这是子组件中调用this.props.children 的内容</PropsChildren>
    </div>
  );
}

子组件代码

export default class PropsChildren extends React.Component {
  componentDidMount () {
    this.props.other.fu() //调用父组件传过来的函数
    console.log(this.props)
  }
  render() {
    return (
    <div>{this.props.children}</div> //直接将父组件对应标签内的内容拿过来
    )
  }
}

基本用法介绍完毕，扩展用法感兴趣的同学继续看！！！

在实际的开发中你可能需要在子组件中限制父组件传递过来的参数类型，typescript语法可以完美解决，不会typescript语法的同学，可以尝试使用react的扩展 prop-types

安装 prop-types

 npm install --save prop-types

在需要使用的子组件中导入

 import propTypes from 'prop-types';

定义子组件接受的参数类型

PropsChildren.propTypes = {
  x:propTypes.number,
  y:propTypes.number
  //这里定义了子组件接收的x和y必须都是number类型
}

完整的子组件代码

import React from 'react';

import propTypes from 'prop-types';
export default class PropsChildren extends React.Component {
	
	static propTypes = {
	  x:propTypes.number.isRequired,
	  y:propTypes.number.isRequired 
	}
	//这种定义类型的方式也可以
  render() {
    return (
    <div>{this.props.x+this.props.y}</div>
    )
  }
}
//这两种定义参数类型的方式选一个
PropsChildren.propTypes = {
  x:propTypes.number.isRequired,
  y:propTypes.number.isRequired //规定了类型，并且必须传
}

错误的父组件传参示范

function App() {
  return (
    <div>
      <PropsChildren name="小李" 
      x={1}
      y="2"
      >
        这是子组件中调用this.props.children 的内容</PropsChildren>
    </div>
  );
}

浏览器会报错提示开发者

通过prop-types在子组件中给参数设置默认值
class创建的组件，推荐使用

  static defaultProps = {
    x: 1,
    y: 2
  }

function可以通过es6语法设置默认值，或者

PropsChildren.defaultProps= {
	x:1,
	y:2
}