React三属性之:props

作用

将父组件的参数传递给子组件

父组件

import './App.css';
import React from 'react';
import PropsTest from './pages/propsTest'
class App extends React.Component{
  render(){
    return(
      <div>
        <h2>App组件h2>
     <PropsTest obj={{name:'王惊涛',age:27}}>PropsTest>
      div>
 
    )
    
  }
}
 
export default App;
 
//组件上的obj={{name:'王惊涛',age:27}},传递的就是props参数

子组件

import React from "react";
class PropsTest extends React.Component{
    render(){
        return(
            <div>
            <h4>propsTest子组件h4>
            <p>名字{this.props.obj.name}p>
            <p>年龄{this.props.obj.age}p>
            div>
 
        )
    }
}
export defaul

效果如下