Question

我正在尝试设置一种从某些json值动态创建表单对象的方法。基本上，我在我的json中有表单对象类型和属性。我将该类型传递给FormInput类，然后调用包含实际表单对象的自定义类。我现在的问题是，当我传入自定义类名“TextInput”（this.props.formElementType）时，React只创建一个名为“textinput”的元素，而不是调用该类。它似乎不喜欢传入字符串，但只想要类名。从本质上讲，...

TextInput = React.createClass({...})
...
FormItem = React.createElement(<TextInputPassedAsAString>, {...})

我不确定是否可以通过传递字符串来调用自定义类。我需要这个实现的帮助或更好的主意，因为我对React比较新。

以下是从以最终渲染块结尾的子节点开始的所有相关代码。请原谅伪咖啡。

的TextInput

TextInput = React.createClass
  handleChange: (event)->
    this.setState
      value: event.target.value
  render: ->
    React.createElement('label', {
      value: this.props.formElementLabel
    })
    React.createElement('input', {
      id: this.props.formElementID,
      type: 'text'
    })
module.exports = TextInput

FormElement

FormElement = React.createClass
render: ->
  R.div(null,
    React.createElement(this.props.formElementType, {
      formElementID: this.props.formElementID,
      formElementLabel: this.props.formElementLabel
    })
module.exports = FormElement

初始调用/最终渲染

React.createElement(FormElement, {
  formElementType: 'TextInput',
  formElementID: 'firstFormElement',
  formElementLabel: 'First text input'
})

Answer 1

嗯，最好的方法，最容易推理等等，可能需要在进行最终渲染的模块中TextInput。在那里创建它，将其他props传递给它，然后将这个创建的组件传递给FormElement，而不是传递组件的字符串表示。

更动态地执行此操作的一种方法是拥有一个模块，该模块将每个动态组件导出为导出时的属性/方法。类似的东西：

module.exports = {
  TextInput: ...
}

然后当你进行渲染时，你可以传递这样的东西：

myImports[json.formElementType]

ReactJS动态调用自定义类

1 个答案: