## react 小笔记

  const setForm = (key: keyof IOtcSellOrders, value: unknown) => {
    setSellOrder({
      ...sellOrder,
      [key]: value
    })
  }

 <Input type='number' className={styles.input}  placeholderStyle='color:#ABABAB' onInput={evt => setForm('amount', evt.detail.value)} placeholder='请输入'/>

# 错误边界。（只能捕获后代组件生命周期里的错误，不能捕获自己组件产生的错误和其他组件在合成事件、定时器中产生的错误） 

 

当父组件下的子组件出现报错的时候，会触发getDeruvedStateFromError调用，并携带错误信息

static getDerivedStateFromError (error){
           return {hasError:error}
}
componentDidCatch(error，info){
console.log('统计错误，反馈给服务器，用于通知编码人员进行bug解决')
}

需要先定义

state = {
  hasError:' ' //用于标识子组件是否产生错误
}

 注意：只适用于生产环境，开发环境不稳定

# 组件间通讯方式

props：

(1).children props

(2).render props

消息订阅-发布：

pubs-sub、event等等

集中式管理：

redux、dva等等

conText:

生产者-消费者模式

 

组件之间的关系

父子组件：props

兄弟组件(非嵌套组件)：消息订阅-发布、集中式管理

祖孙组件(跨级组件)：消息订阅-发布、集中式管理、conText(用的少)

 

 

className = {({isActive})=>isActive?'className1':'className2'}

简写
function computedClassName({isActive}){
     return isActive?'className1':'className2'
}

className = {computedClassName}