工作-react组件通信

背景

公司一个项目是用react去写的，之前也没有接触过react，所以对通信这里也不熟悉，借此机会，整理下这里，供以后参考。

PS：看博客觉得这句话说的特别通俗易懂
核心:谁的数据 数据的修改方式就谁里面定义 别人只能调用 需要处理的 把声明好的方法传过去

父传子通信

：通过props去接受。

子传父通信

情景 子控制父弹窗

// 在父页面
{
  this.orderData && this.orderData.orderid && (
    <OrderImgs
      orderId={this.orderData.orderid}
      change={this.previewImage}
    />
  )
}
// 在父页面定义方法及弹窗等
@action.bound
previewImage (val) {
   this.previewImageUrl = val;
   this.previewModalShow = true;
 }

{
  this.previewModalShow && (
    <Modal
      title="预览图片"
      visible={this.previewModalShow}
      footer={null}
      onCancel={() => this.previewModalShow = false}
      width={700}
    >
      <img
        style={{ "width": "650px" }}
        src={this.previewImageUrl}
        alt=""
      />
    </Modal>
  )
}

// 在子页面
<p
  onClick={() => this.props.change(e.url)}
  className="img"
  style={{ "background": `url(${e.url})`, "background-size": "cover", "background-position": "center" }}
></p>