React/practise/20.props的解构.jsx

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