Question

工作版

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

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

改进版本，但无效

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

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

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

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

<强> Example

Answer 2

完整的JSX更好，但这一行：

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

您缺少{ }括号以逃避JSX。有了它们，它也应该起作用：

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

Answer 3

我不太了解JSX，但我认为你不能把React.createElement(TextField, {})放在<div>里面（正如@wintvelt指出的那样，你必须将它包裹在{{1}内}}）。所以我会像这样使用纯JS：

{}

或者使用漂亮的CoffeeScript：

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

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

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

3 个答案: