search

alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.36k stars 1.48k forks source link

[Bug Report] designable-formily 工具 NumberPicker 组件 配置 formatter 参数报错 #3224

Closed melodyJie closed 1 year ago

melodyJie commented 2 years ago

Steps to reproduce

使用官方提供的 formilyjs 线上设计器工具 按照如下步骤操作

  1. 选中 NumberPicker 组件
  2. 编辑 组件属性中的 格式转换器
  3. 输入 value => `$$ ${value}`
  4. 切换到 JSONTREE 模式, 可以看到相关配置: "formatter": "{{value => `$$ ${value}`}}"
  5. 切换到 PREVIEW 模式, 可以看到formily/antd 是正常运行的
  6. 切换回 DESIGNABLE 模式, 出现报错

001

002

003

What is expected?

正常运行

What is actually happening?

报错，且页面挂掉

Package

@formily/core@2.1.6

createForm 的 designable 模式下，表达式字段是否都有类似问题，不会将 {{}} 转成 function？

melodyJie commented 2 years ago

我在 alibaba/designable 项目下也提了相关 issues

https://github.com/alibaba/designable/issues/308

melodyJie commented 2 years ago

我简单看了下源码, 有两个疑问：

  1. designable 模式下不走 makeObservable 的逻辑是合理的吗？ 源码位置：makeObservable

如果不走，在 designable 模式下 传给底层组件的 需要对表达式值进行相应转换的 属性 全部都是{{string}} 结构，这种非法传参的情况不会很不合理吗？

  1. 关于 toJS 方法的作用？

相关源码：

一开始误以为改方法是将 表达式字符串 转换成 js 对象的， 结果发现根本不是，看半天也没理解该方法的作用是什么？

麻烦大佬们有空的话解答下

janryWang commented 2 years ago

designable模式，表达式是不会执行的，因为缺少上下文，NumberPicker这个问题，建议在搭建态渲染用Input组件mock一下就行了，搭建态的定位是原型搭建，不是运行时搭建

yiyunwan commented 2 years ago

designable模式，表达式是不会执行的，因为缺少上下文，NumberPicker这个问题，建议在搭建态渲染用Input组件mock一下就行了，搭建态的定位是原型搭建，不是运行时搭建 我选择的是搭建态组件写个HOC把{{}}的props置为空