关于react组件传值问题

父组件给子组件传值

父组件主要代码:

import React, {Component} from 'react';
import PropTypes from 'prop-types'; // 主要用来判断父组件传递过来的数据类型
class Com extends Component {
  render () {
    console.log(this.props) // 子组件中可以通过this.props来访问父组件中的数据
    return (
      <ul>
        {
          /*
          <li>
          {
            // <img src="" alt="" style="width: 60px;"/>
          }
          <img src="" alt="" style={ { width: '60px'} }/>
          <p>华为meta 30</p>
          <p>5999</p>
        </li>
        */
        }
        {
          this.props.prolist.map(item => ( // 回调函数自带返回值，如果返回的没有逻辑编写，可以直接通过这种方式返回，也可以通过其他方式返回
            <li key={item.proid}>
              <img src={  item.proimg  } alt="" style={ { width: '60px'} }/>
              <p>{ item.proname }</p>
              <p>{ item.price }</p>
            </li>
          ))
        }
      </ul>
    )
  }
}

Com.propTypes = {
  prolist: PropTypes.array // 定义父组件传递过来的prolist数据类型是数组
}

export default Com; // 暴露模块

 

子组件相关代码：

import React, { Component} from 'react';
import { getBannerlist, getProlist} from '@/utils/api.js';
import Prolist from './Prolist'; // 引入组件
export default class extends Component {
  constructor (props) {
    super(props);
    this.state = {
      bannerlist: [],
      prolist: []
    }
  }
  componentDidMount () { // 生命周期函数
    getBannerlist().then(data => {
      console.log(data.data)
      this.setState({
        bannerlist: data.data
      })
    })
    getProlist().then(data => {
      console.log(data)
      this.setState({
        prolist: data.data
      })
    })
  }
  render () {
    return (
      <div>
        <ul>
        { this.state.bannerlist.map((item) => { // 渲染轮波图数据
          return (
            <li key={ item.bannerid }>
              <img src={ item.img } />
              </li>
          )
         })}
         </ul>
         {
         /* 父组件给子组件传值时，在父组件调用子组件的时候给子组件定义一个自定义属性，属性值就是需要传递的数据，如果
         需要传递的知识布尔值，number类型或者是变量，需要用到react的{}，表示绑定属性 */
         }
         <Prolist prolist={this.state.prolist}></Prolist> 
      </div>
    )
  }
}

通过以上我们就完成了react的父组件传值给子组件