React props 在组件中的应用

1、props 作为组件的三大 属性之一， 在类式组件和 函数式组件中都有应用

2、在类式组件中的应用

         先上代码   定义一个组件 tudy_props    在子组件 用this.props 直接使用

export default class Study_props extends Component {
    render() {
        //解构赋值  
        const {age,sex} =this.props
        return (
            <div style={{width:'500px',margin:'0 auto',fontSize:'25px'}}>
                <ul>
                    <li>姓名：{this.props.name}</li>   这里没有用解构赋值  两种方式都可以
                    <li>年龄：{age}</li>
                    <li>性别：{sex}</li>
                </ul>
            </div>
        )
    }
}

        app.js 

                在父组件 调用的时候 可以将 数据以key-value的形式 传入

import Study_props from './components/Study_props/Study_props.js'
function App() {
  return (
    <div className="App">
     <Study_props name='辞耳' age='22' sex='男'></Study_props>
    </div>
  );
}

export default App;

结果 

 

3、在函数式组件中的应用

        在函数式组件种也是可以用的，直接当作参数 传入 

function Person (props){
    const {name,age,sex} = props
    return(
        
    )
}