Javascript 如何使用组件名及其道具呈现ReactJS？

工作版本

// Load from defined component
const TextField = require('textfield');

render: function() {
  <div>
   <TextField label='sample' defaultValue='default' placeholder='type your value' />
  </div>
}

但它并没有在同样的错误下工作

---

谢谢你们的帮助和建议

您可以使用spread操作符传递一整套道具，它在JSX中有一种特殊的用例

<TextField { ...(_getPropsForField('field')) } />

---

完全使用JSX更好，但这一行：

React.createElement(TextField, this._getPropsForField('sample'))

您缺少转义JSX的

{}

括号。与他们一起，它也应该起作用：

{React.createElement(TextField, this._getPropsForField('sample'))}

---

我不太了解JSX，但我认为您不能将

React.createElement（TextField，{}）

放在

中（正如@wintvelt指出的，您必须将其包装在

{}

中）。所以我会像这样使用纯JS：

render: function() {
  textField = React.createElement(TextField, this._getPropsForField('sample'));

  return React.createElement('div', null, textField);
  // Or this shortcut:
  return React.DOM.div(null, textField);
},

或者用漂亮的咖啡脚本：

render: ->
  React.DOM.div
    null
    React.createElement TextField, @_getPropsForField('sample')

---

是的，

…

真神奇！是否有其他选项可以使其工作？是否应该将其呈现为字符串，而不是在缺少

{}

的情况下给出错误？是的，应该。但是字符串不会引发错误：）我猜引发错误的原始代码与您的问题中的不同。如果您将其放在{}括号中，实际上可以将其放在JSX中。JSX代码实际上编译为

React.createElement（）

。

render: function() {
  textField = React.createElement(TextField, this._getPropsForField('sample'));

  return React.createElement('div', null, textField);
  // Or this shortcut:
  return React.DOM.div(null, textField);
},

render: ->
  React.DOM.div
    null
    React.createElement TextField, @_getPropsForField('sample')