Skip to content
This repository was archived by the owner on Jul 21, 2025. It is now read-only.

Conversation

@ponkans
Copy link

@ponkans ponkans commented May 10, 2022

问题

我的 magic React 组件写法:

import React, { createElement } from 'react';
import ReactDOM from 'react-dom';

// 定义组件
const Hello = ({ test }) => {
  // test 初始值为 null,这里应该没有任何展示
  // 由于 magic 内部处理问题,test 并不会返回 null,而是一个唯一的 hash 值
  return <div>{ test?.name ? test.name : test }</div>
}

// 挂载
export function mount(container, props) {
  ReactDOM.render(createElement(Hello, props, null), container);
}

// 更新
export function updated(attrName, value, container, props) {
  ReactDOM.render(createElement(Hello, props, null), container);
}

自定义 magic 组件 Vue 中使用姿势:

magic('react-hello', ReactHello, {
  propTypes: {
    test: Object
  },
  shadow: true
});

<template>
  <div>
    <div @click="changeName">赋值</div>
    <react-hello :test="useProps(test)"></react-hello>
  </div>
</template>
<script>
import { useProps } from '@magic-microservices/magic';
export default {
  data() {
    return {
      test: null
    }
  },

  methods: {
    useProps,

    changeName() {
      this.test = { name: 'magic' }
    }
  }
}
</script>

浏览器渲染效果:
image
https://user-images.githubusercontent.com/30647295/167631457-f32245ba-1c39-42ec-8322-2561a139e17b.mp4

修复方式

src/lib/Heap/index.ts 的 getPropsValue 方法中,从 heap 取值时,判断条件更改为 dataMap 是否存在对应的 key

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants