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.
55 lines
1.3 KiB
55 lines
1.3 KiB
import React from "react"
|
|
// App 为父组件，Son 为子组件
|
|
|
|
// 函数式的 Son
|
|
function SonF (props) {
|
|
// props 是一个对象，里面存着通过父组件传入的所有数据
|
|
return (
|
|
<div>函数子组件，
|
|
{/* 数组传递：尽量不要直接传递数组，数组用来遍历的，不要当成字符串来渲染
|
|
<div>函数子组件，{props.list}</div> */}
|
|
{props.list.map(item => <p key={item}> {item} </p>)}
|
|
|
|
{/* 对象传递 */}
|
|
{props.userInfo.name}{<br />}
|
|
|
|
{/* 传递函数 */}
|
|
<button onClick={props.getMes}>触发父组件传入的函数</button>{<br />}
|
|
|
|
{/* 传递 JSX（模板）*/}
|
|
{props.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
|