React属性传值

React 的一大特点是单向数据流。React 中的每一个组件，都包含有一个属性（props），属性主要是从父组件传递给子组件的，在组件内部可以通过this.props获取属性对象。

定义和使用props 传值

类组件

• 类定义组件时，使用属性 this.props.属性名称
  • 在父组件render 方法中调用组件时指定属性名称
  • 在自定义的子组件中通过this.props.指定属性名称 来获得组件属性的值，需要使用{}括起来

父组件
import React from "react";
import Home from './home.js'
class App extends React.Component {
    constructor() {
        super()
    };
    render() {
        let msg='app.jsx';
        return (
            <div>
                <Home data={msg} info='to home' />
            </div>

        )
    }
}
export default App;

子组件
import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <div>{this.props.data}</div>
        <h1>{this.props.info}</h1>
      </div>
    )
  }
}

import React from "react";
import Des from "./des";
import sinadata from './sina.js'
class App extends React.Component {
    constructor() {
        super()
    };
    render() {
        let objarr=sinadata.statuses;
        return (
            <div>
                {
                    objarr.map((el)=>{
                return <Des arr={el} key={el.id}></Des>
                    })
                }
            </div>

        )
    }
}
export default App;

import React, { Component } from 'react' //{ Component } 具名导出,React默认导出

export default class Des extends Component {
  render() {
        
    return (
      <div>
        {   
            <>
                <img src={this.props.arr.user.profile_image_url} />
                <div>{this.props.arr.user.screen_name}</div>
                <div>{this.props.arr.text}</div>
            </>
        }
      </div>
    )
  }
}

函数组件

• 函数定义组件时，使用形参接受
  • 在父组件render 方法中调用组件时指定属性名称
  • 在自定义的子组件中通过函数接收参数props，props.指定属性名称来获得组件属性的值，需要使用{}括起来

import React from "react";
import First from "./First.js";
class App extends React.Component {
    constructor() {
        super()
    };
    render() {
        let data='city zoo';
        return (
            <div>
                <First album={data} author='gloria'></First>
            </div>

        )
    }
}
export default App;

let First=(props)=>{
    // props是形参，形参变量自定义
    console.log(props,666777);
    return (
      <div>
        <h2>{props.album}</h2>
        <p>{props.author}</p>
      </div>
    )
  }
  
export default First;

多属性传值的方式（JSX中使用对象扩展运算符易错）

<First info={...p1}></First>

以上会报错，无法解析。因为在JSX中遇到{}就以js来解析，所以遇到{...p1}左边的{时，开始以js来解析，而对象扩展运算符语法，无法解析成对象，因为需要再多一个{}包住...p1才行，否则会报错。

import React from "react";
import First from "./First.js";
class App extends React.Component {
    constructor() {
        super()
    };
    render() {
        let p1 = {
            name: 'xwlb', 
            from: 'china',
            item: 'fixed no.1'
        };
        return (
            <div>
                <First info={{...p1}}></First>
            </div>

        )
    }
}
export default App;

let First=(props)=>{
    // props是形参，形参变量自定义
    let print=()=>{
        console.log(props,666777);
    };
    return (
      <div>
        <button onClick={print}>print</button>
      </div>
    )
  }
  
export default First;