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.
67 lines
1.3 KiB
67 lines
1.3 KiB
import React from 'react'
|
|
// App 为父组件,Son 为子组件
|
|
|
|
// 函数式的 Son
|
|
/* function SonF (props) {
|
|
// 解构赋值
|
|
// 第一种写法
|
|
const { list, userInfo, getMes, child } = props
|
|
return (
|
|
<div>函数子组件,
|
|
{list.map(item => <p key={item}> {item} </p>)}
|
|
{userInfo.name}{<br />}
|
|
<button onClick={getMes}>触发父组件传入的函数</button>{<br />}
|
|
{child}
|
|
</div>
|
|
)
|
|
} */
|
|
|
|
// 解构赋值
|
|
// 第二种写法
|
|
function SonF({ list, userInfo, getMes, child }) {
|
|
return (
|
|
<div>
|
|
函数子组件,
|
|
{list.map((item) => (
|
|
<p key={item}> {item} </p>
|
|
))}
|
|
{userInfo.name}
|
|
{<br />}
|
|
<button onClick={getMes}>触发父组件传入的函数</button>
|
|
{<br />}
|
|
{child}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// 类组件的 App
|
|
class App extends React.Component {
|
|
// 准备数据
|
|
state = {
|
|
list: [1, 2, 3],
|
|
userInfo: {
|
|
name: 'Ken',
|
|
age: 20,
|
|
},
|
|
}
|
|
|
|
getMes = () => {
|
|
console.log('父组件中的函数')
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
{/* 在子组件身上绑定属性,属性名可以自定义,保持语义化 */}
|
|
<SonF
|
|
list={this.state.list}
|
|
userInfo={this.state.userInfo}
|
|
getMes={this.getMes}
|
|
child={<span>this is span</span>}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default App
|