javascript - 如何使用组件名称及其 Prop 渲染 ReactJS？

Question

工作版本

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

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

改进的版本，但不起作用

然后我有很多 TextField，所以我重构了我的代码，以更通用的方式创建 Prop 。然后，我希望像这样的事情会起作用，但它不会:

render: function() {
  <div>
   // This not working but raised error: Objects are not valid as a React child (found: object with keys: {label, defaultValue, placeholder}
   React.createElement(TextField, this._getPropsForField('sample'))
  </div>
},

_getPropsForField: function(fieldName) {
  // Initialize data for fieldName, but return a mock for now
  return {
    label: 'sample',
    defaultValue: 'default',
    placeholder: 'placeholder'
  };
}

我也试过:

TextField(this._getPropsForField())

但它并没有解决同样的错误。

非常感谢任何帮助或建议，谢谢你们!

Answer 1

你可以使用扩展运算符传递一整套 props，这在 JSX 中有一种特殊的用例。

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

Example