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

FungLeo

发布于 2022-05-05 13:51:43

1.3K00

代码可运行

文章被收录于专栏：地方网络工作室的专栏地方网络工作室的专栏

运行总次数：0

代码可运行

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

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

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

创建 @/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>
    )
  }
}