react this.props.children

Question

detail.jsx文件

import React from 'react'
import DetailHeader from '../components/detail-header.jsx'
import DetailContent from '../components/detail-content.jsx'
import { connect } from 'react-redux'

const detail = React.createClass({
  render() {
    let id  = this.props.params.id
    return (
      <div className="container">
        <DetailHeader id={id}/>
        <DetailContent id={id}/>
        **{this.props.children}**
      </div>
    )
  }
})

export default detail

this.props.children在这里指的是什么呢

Answer 1

固定的一个属性，用来取标签内的子元素 <Detail>这里就是children的内容</Detail>

另外，react中组件名必须大写

react中组件名必须大写

react中组件名必须大写

重要的事说三遍

Answer 2

就是这个组件的子代元素

例如，如果以如下方式使用这个组件，

<detail>a</detail>

这个时候执行刚才的 render() 函数，那么 this.props.children 就会是字符串 "a"