web技术学习

切换模式

本文总阅读量 次

React 组件、通讯 ​

函数式组件 ​

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

类组件 ​

继承 React.Component

js
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}/>

A

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

B

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

评论