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.
|
|
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
|