react-{this.props}的解释

react-{this.props}传递参数

基于react环境

{…this.props}是props所提供的语法糖，可以将父组件的所有属性复制给子组件（按照我的通俗理解来说，这就是另类的继承）

App,js

子组件

import React, {
      Component } from 'react'


class Text extends Component{
     
    constructor(){
     
        super()
    }
    render(){
     
        const {
     name,age}=this.props; //解构
        return(
            <div>
                <h2>我的名字：{
     name}</h2>
                <h2>我的年龄：{
     age}</h2>
            </div>
        )
    }
}

父组件
是运用{…this.props},将父组件中的所有元素给了子组件

 export default class App extends Component {
     
    constructor(props) {
     
         super(props);
        this.state={
     
             name:'xjj',
            age:'18'
         }
     }

    render() {
     
        return(
             <Text {
     ...this.state}></Text>
            
        );
     };
 }

父组件
普通传递参数

export default class App extends Component {
     
    constructor(props) {
     
        super(props);
        this.state={
     
            name:'xjj',
            age:'18'
        }
    }

    render() {
     
        return(
            <Text name={
     this.state.name} age={
     this.state.age}></Text>
            
        );
    };
}

index.js

import React from 'react';
import ReactDOM from "react-dom";
import App from './App';


ReactDOM.render(<App/>,document.getElementById('root'));

运行结果