React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值

水深无声 2022-05-21 02:50 150阅读 0赞

# React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值 #

## React 入门系列教程导航 ##

[React + webpack 开发单页面应用简明中文文档教程（一）一些基础概念][React _ webpack]  
[React + webpack 开发单页面应用简明中文文档教程（二）创建项目][React _ webpack 1]  
[React + webpack 开发单页面应用简明中文文档教程（三）目录说明以及调整项目构架文件][React _ webpack 2]  
[React + webpack 开发单页面应用简明中文文档教程（四）调整项目文件以及项目配置][React _ webpack 3]  
[React + webpack 开发单页面应用简明中文文档教程（五）配置 api 接口请求文件][React _ webpack _ api]  
[React + webpack 开发单页面应用简明中文文档教程（六）渲染一个列表，初识 jsx 文件][React _ webpack _ jsx]  
[React + webpack 开发单页面应用简明中文文档教程（七）jsx 组件中调用组件、父组件给子组件传值][React _ webpack _jsx]  
[React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面][React _ webpack _Link]  
[React + webpack 开发单页面应用简明中文文档教程（九）子组件给父组件传值][React _ webpack 4]  
[React + webpack 开发单页面应用简明中文文档教程（十）在 jsx 和 scss 中使用图片][React _ webpack _ jsx _ scss]  
[React + webpack 开发单页面应用简明中文文档教程（十一）将项目打包到子目录运行][React _ webpack 5]

--------------------

在上一章中，我们成功调取数据，并渲染了一个列表。应该还是有成就感的吧。

这一章，我们来实现父子组件之间的传值。

## 创建 @/coms/header.jsx 组件 ##

新建这个文件，并输入以下代码：

import React, { Component } from 'react'
    
    export default class Header extends Component {
      render () {
        let { title } = this.props
        return (
          <header className='header'> <h1>{title}</h1> </header> ) } }

由上面的代码，我们可以看到 `this.props` 是用来接收父组件的传值的。怎么传值的呢？我们去修改我们的 `page/site/index.jsx` 文件

## 父组件调用并传值给子组件 ##

import React, { Component } from 'react'
    import { Link } from 'react-router-dom'
    
    import Api from '@/tool/api.js'
    
    // 这样，调用我们的自定义的组件
    import Header from '@/coms/header'
    
    export default class Index extends Component {
      constructor (props) {
        super(props)
        this.state = {
          list: []
        }
      }
    
      componentDidMount () {
        this.getData()
      }
    
      getData () {
        Api.get('topics', null, r => {
          this.setState({list: r.data})
        })
      }
    
      render () {
        let { list } = this.state
        let dom = null
        if (list.length !== 0) {
          let listDom = list.map((i, k) => {
            return (
              <li key={k}><Link to={`/details/${ i.id}`}>{i.title}</Link></li> ) }) dom = ( <div className='tipics_list'> <ul>{listDom}</ul> </div> ) } return ( <div className="outer home"> {/* 我们像用 html 标签一样，使用我们的自定义组件，并通过标签的方式，传值 */} <Header title='网站首页'></Header> {dom} </div> ) } }

好，我们跑起来看一下：

![5d287adce75152d78ff559c55bcdb1.jpg][]

> 我把那个红色的背景给去掉了。

如上，我们顺利的把值传给了子组件，并且子组件顺利的给显示出来了。

## 其他补充 ##

1.  `<Header title='网站首页'></Header>` 这的书写方式，也可以写成 `<Header title='网站首页' />`
2.  传值是可以传各种东西的。数字，函数，布尔值，对象，啥都能传。
3.  传的值的格式必须对上，否则会报错的。

本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

[React _ webpack]: http://blog.csdn.net/fungleo/article/details/80841159
[React _ webpack 1]: http://blog.csdn.net/fungleo/article/details/80841181
[React _ webpack 2]: http://blog.csdn.net/fungleo/article/details/80841200
[React _ webpack 3]: http://blog.csdn.net/fungleo/article/details/80841220
[React _ webpack _ api]: http://blog.csdn.net/fungleo/article/details/80841241
[React _ webpack _ jsx]: http://blog.csdn.net/fungleo/article/details/80841255
[React _ webpack _jsx]: http://blog.csdn.net/fungleo/article/details/80841263
[React _ webpack _Link]: http://blog.csdn.net/fungleo/article/details/80841274
[React _ webpack 4]: http://blog.csdn.net/fungleo/article/details/80841290
[React _ webpack _ jsx _ scss]: http://blog.csdn.net/fungleo/article/details/80841296
[React _ webpack 5]: http://blog.csdn.net/fungleo/article/details/80841308
[5d287adce75152d78ff559c55bcdb1.jpg]: /images/20220521/1b8e383b831f4fc2ade292c28c1e4e63.png