You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
880 B
38 lines
880 B
import React from 'react'
|
|
// App 为父组件,Son 为子组件
|
|
|
|
// 函数式的 Son
|
|
function SonF(props) {
|
|
// props 是一个对象,里面存着通过父组件传入的所有数据
|
|
return <div>函数子组件,{props.msg}</div>
|
|
}
|
|
|
|
// 类组件的 Son
|
|
class SonC extends React.Component {
|
|
render() {
|
|
return (
|
|
// 类组件必须通过 this 关键词去获取,这里的 props 是固定的
|
|
<div>类子组件,{this.props.msg}</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
// 类组件的 App
|
|
class App extends React.Component {
|
|
// 准备数据
|
|
state = {
|
|
message: 'this is message',
|
|
}
|
|
render() {
|
|
return (
|
|
<div>
|
|
{/* 在子组件身上绑定属性,属性名可以自定义,保持语义化 */}
|
|
<SonF msg={this.state.message} />
|
|
{/* msg 是属性 */}
|
|
<SonC msg={this.state.message} />
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default App
|