Skip to content

fix: 修复引用类型初始为空取值错误 #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants