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