React里props的用法

世间万物皆对象

发布于 2024-03-20 19:41:20

810

发布于 2024-03-20 19:41:20

文章被收录于专栏：startstart

props运用场景

组件传参父传子场景一：

传递变量父组件中直接绑定变量 <Son data={obj}/> <Son data={obj}{...obj2}/> 子组件this.props.data接收 data 是自定义的属性名

为什么传的第二个对象不解构会报错？因为第一个对象会有data作为属性名，而第二个对象不解构就没有属性名场景二：传递内容

组件极少部分不同时使用父组件中双标签包裹内容我是父组件传来的内容子组件用this.props.children接收一般用闭合标签，也就是为了这样传递参数场景三：传递组件大多用于子组件大部分相同，少数不同时使用父组件绑定组件名称<Parent left={ <Son1> }> <Parent left={ <Son2> }> 子组件this.props.left接收 left 是自定义的属性名

示例

父传子

父组件

import React, { Component } from 'react';
import One from './one.jsx'
import Two from './two.jsx'
import Three from './three.jsx'
import Four from './four.jsx'
import Five from './five.jsx'

class Props extends Component {
  render() {
    const obj = {
      age:'32',
      name: "张三"
    }
    const obj2 = {
      job: '前端工程师'
    }
    return (
      <div className="props_main">
        <h3>props的使用场景有哪些</h3>
        <One title="全国名师推荐" />
        {/* 复合数据类型需要用扩展运算符，否则会报错。因为不用扩展运算符，没有属性去接收 */}
        <Two data={obj} {...obj2} />
        <Three>
          <a href="#">
            更多&gt;&gt;
          </a>
        </Three>
        <Three />
        <Four left={<Five />} />
      </div>
    )
  }
}
export default Props

子组件

One子组件

import React, { Component } from 'react';
class One extends Component {
  render() {
  //父组件传一个属性title，子组件用this.props.title接收
    return (
      <div className="props_main">
        <h3>one</h3>
        {/* 第一种传参方法 */}
        {this.props.title}//全国名师推荐
      </div>
    )
  }
}
export default One

Two组件

//这是复合型组件
import React, { Component } from 'react';
class Two extends Component {
  render() {
    const { name } = this.props.data
    const { data,  job } = this.props
    return (
      <div className="props_main">
        <h3>two</h3>
        {this.props.data.name}//元芳
        {name}//元芳
        {data.age}//32
        {job}//前端工程师
      </div>
    )
  }
}
export default Two

Three组件

import React, { Component } from 'react';
class Three extends Component {
  render() {
    return (
      <div className="props_main">
        <h3>three</h3>
        {/* 这种传参方法 ,可以被复用 */}
        {this.props.children}//更多>>
      </div>
    )
  }
}
export default Three

Four组件

import React, { Component } from 'react';
class Four extends Component {
  render() {
    return (
      <div className="props_main">
        <h3>Four</h3>
        {/* 第三种传参方法  */}
        {this.props.left}//我是第五个组件
      </div>
    )
  }
}
export default Four

Five组件

import React, { Component } from 'react';
class Five extends Component {
  render() {
    return (
      <div className="props_five">
        <h3>我是第五个组件</h3>
      </div>
    )
  }
}
export default Five

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2024-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

react