仅使用ES3创建带有输入的react组件

时间:2017-12-26 08:44:41

标签: reactjs input google-apps-script

我正在使用谷歌脚本我的日常练习和recenlty试图将react.js连接到web-app的客户端。
我已经尝试使用require.js连接react.js,但重点是我无法使用jsx。我必须使用vanila javascript来创建和渲染组件。

const myMock = jest.fn();

myMock
  .mockReturnValueOnce(10) // set the response once
  .mockReturnValueOnce('x')
  .mockReturnValue(true); // set a persistent response 

console.log(myMock(), myMock(), myMock(), myMock());
// > 10, 'x', true, true

当我尝试创建第一个元素(el [0])时,它工作正常,并出现一个按钮 enter image description here 但是当我试图创建第二个元素 - 输入时,它会响应错误

  

“react.js:20145 Uncaught Error:输入是一个void元素标记,必须   既没有requirejs.config({ // module name mapped to CDN url paths: { // Require.js appends `.js` extension for you 'react': 'https://unpkg.com/react@15.3.2/dist/react', 'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom' } }); requirejs(['react', 'react-dom'], function(React, ReactDOM) { var app, cr, r_comp, el, app; cr = React.createElement; r_comp = new React.Component(); el = []; el[0] = React.createElement('button', { type: 'submit', className: 'postfix', disabled: false }, 'Automate'); el[1] = React.createElement('input', { placeholder: 'Enter a url', type: 'url', autoFocus: true }, 'default_url') app = document.getElementById('app'); ReactDOM.render(el[1], app); }); 也没有使用children。“

enter image description here 谷歌搜索该错误我没有找到任何有用的信息这个案例,或者我不明白反应是否足以理解我应该改变什么来克服错误。 请帮忙。

1 个答案:

答案 0 :(得分:0)

假设您希望default_url成为输入名称

el[1] = React.createElement('input', {
  placeholder: 'Enter a url',
  type: 'url', autoFocus: true,
  name: 'default_url'
}
/*, no children*/);