React 组件、通讯

函数式组件

function App() {
 return ( <div className="App"></div> );
}

继承 React.Component

import React from 'react';
class ComA extends React.Component{
  render(){
    return (
      <div>React组件</div>
    )
  }
}

warning

React 中组件首字母必须为大写，小写会被识别为元素 DOM 标签

jsx

<Com name={this.state.age}/>
function Com(){
  return <div>{this.props.name}</div>
}

父发送方法给子组件调用传参

jsx

<SonCom getSonData={this.getSonData}/>
<button onClick={() => {this.props.getSonData('sonVal')}}>click</button>

A --- 父 --- B

父组件传给 A 函数，A 调用方法，方法修改数据，数据传给 B

jsx

getSonData = msg => {
  this.setState({msg})
}

<SonCom getSonData={this.getSonData}/>
<SonCom1 msg={this.state.msg}/>

jsx

<button onClick={() => {this.props.getSonData('sonVal')}}>click</button>

jsx

<div>{this.props.msg}</div>