React | 组件传值

1. 给子组件传值（构造函数）

现在组件App给子组件Home传值，index.home

//App.js

import index from './common/json/data.json'

class App extends Component {
  render() {
    return (
      <div className="App">

        {/* 这里的data会成为Home组件构造函数参数props的一个属性 */}
        <Home data={index.home} />

      </div>
    )
  }
}

构造函数获取props 

//Home.jsx

export default class Home extends Component {

  constructor(props) {
    super(props)

    // 获取参数props的属性
    let data = props.data

    this.state = {
      title: data.title
    }

  }

  /** codes **/

}

 2. 兄弟组件传值

现在组件TabRouter要获得组件Home的name属性（组件注册名）

//App.js

import index from './common/json/data.json'

class App extends Component {
  render() {
    return (
      <div className="App">

        <TabRouter>
          <Home data={index.home} />
          <Project data={index.project} />
          <About data={index.about} />

        </TabRouter>

      </div>
    )
  }
}

//TabRouter.jsx

export default class TabRouter extends Component {
  constructor(props) {
    super(props)
    this.state = {

      // 回调函数
      tabs: this.getNames(),

      currentTab: null
    }
  }
  getNames() {
    let names = []

    // this.props.children获得孩子数组
    for (const child of this.props.children) {
      
      // 获得组件注册名child.type.name
      names.push(child.type.name)

    }

    return names
  }

  /** codes **/

}

不过最好不要使用component.type.name这个属性（它是组价class类的类名），因为最后npm build的过程中会混淆丑陋化代码，这个name值会变成一个字母。