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(
)
}