属性 props

1 基本用法

属性一般时外部传入的，属性不能被组件自己更改，但是你可以通过父组件主动重新渲染的方式来传入新的 props

const Con = (props) => {
  return (
    <Con>{ props.title }</Con> //函数式组件通过props获取属性
  )
}
class Com extends Component {
  render () {
    return (
      <div>
        { this.props.name } //类组件通过this.props获取属性
      </div>
    )
  }
}
// 父组件在调用子组件的地方，添加自定义的属性，
// 如果属性的值是变量，boolean类型，number类型，对象，数组，null， undefined，函数。
// 需要使用{}包裹
class App extends Component {
  render() {
    return (
      <div>
        <Con title="Hello"></Con>
        <Com name="React"></Com>
      </div>
    );
  }
}

2 默认参数

不管是类组件还是函数式组件。都可以在组件定义完毕，暴露之前，通过组件的 defaultProp s属性设置默认值。

函数式组件

function Content (props) {
  return (
    <div>
      { props.content }
    </div>
  )
}
Content.defaultProps = {
  content: 'React.js'
}

类组件

class Footer extends Component {
  render () {
    return (
      <div>
       { this.props.name }
      </div>
    )
  }
}
Footer.defaultProps = {
  name: 'React'
}

如果组件是类组件，可以通过类的静态属性设置默认值

function Content (props) {
  static defaultProps = {
    name: 'React.js'
  }
  return (
    <div>
      { props.content }
    </div>
  )
}
Content.defaultProps = {
  content: 'React.js'
}