0

这里的问题示例：https ://codesandbox.io/s/spike-react-starter-6xkwx

我尝试使用自定义react-jsonschema-form小react-jsonschema-form-conditionals部件：

export const MoneyWidget = props => {
  return <div>{props.value}</div>
}

export const uiSchema = {
  money: {
    'ui:widget': MoneyWidget
  }
}

但是，我一直有一个React not defined或一个_objectWithoutProperties2错误。我想知道你是否可以帮助解决这个问题谢谢

4

2 回答 2

1

这似乎是一个问题react-jsonschema-form-condtionals。为了进一步深入研究，这是正在发生的事情：

任何具有条件规则的自定义小部件仅适用于 babel 转译版本。弹出 Else React 未定义错误。

为了证明这一点，而不是

export const MoneyWidget

如果你这样做

export const TextField

一切都会开始工作；因为 TextField 已经是一个 babel 转译组件。

现在，为了让 MoneyWidget 以类似的方式工作，如果您使用 webpack 或仅作为概念证明在线 babel 转换器，您将从

import React from 'react'
import TextField from '@material-ui/core/TextField'

function MoneyWidget(props) {
  return <div>{props.value}</div>
}

export default MoneyWidget

至

Object.defineProperty(exports, '__esModule', {
  value: true
})
exports.MoneyWidget = void 0

var _react = _interopRequireDefault(require('react'))

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj }
}

var MoneyWidget = function MoneyWidget(props) {
  return /*#__PURE__*/ _react.default.createElement('div', null, 
     props.value)
}

exports.MoneyWidget = MoneyWidget

使用此版本后，流程也将开始显示您的自定义小部件，以及所有有效的规则。

这是一个工作版本，所有关于此的评论都添加到了一个新的MoneyWidget.jsx组件文件中

https://codesandbox.io/s/stackoverlfow-spike-react-starter-8jp5o

希望能帮助到你！

于 2020-03-27T08:56:32.470 回答
0

在 UISchema.jsx 上，您不能在 MoneyWidget 下使用标记。

以下工作没有任何错误。

export const MoneyWidget = props => {
  return props.value
}
于 2020-03-17T10:20:33.413 回答