Question

凭借命运的意志，我必须使用只有ES3标准的react.js。所以，jsx，类和其他东西。
使用React.createClass和React.createElement我设法创建了一个交互式输入组件，它将输入文本反映到输入字段上方的标签上。
这个代码如下：

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) {
      'use strict';
      var Input;
      var cr, root;
      cr = React.createElement;

      Input = React.createClass({
        displayName: 'Input',

        getInitialState: function getInitialState() {return {typed: ''};},

        onChange: function onChange(event) {
          this.setState({typed: event.target.value});
        },

        render: function render() {
          return cr('div', null,
            cr('div', null, '=>' + this.state.typed),
            cr('input', { type: 'text', onChange: this.onChange.bind(this)})
            );
          }
        });

        root = Input;
        var app = document.getElementById('app');
        ReactDOM.render(cr(root, null), app);
});

但现在我正在尝试创建一个内部有两个Input组件的新组件：

    InputBlock = React.createClass({
    displayName: 'InputBlock',
    render: function render() {
      return cr('div', null, 
        cr('Input', null), 
        cr('Input', null)
        );
      }
    });

我希望看到两个具有动态行为的元素，但只获得两个简单的输入字段：

我明白我错过了一些显而易见的事情，但我很反应。我们还不能看到整个画面。请帮忙。

全面实施最终代码

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) {
      'use strict';
      var Input, InputBlock;
      var cr, root;
      cr = React.createElement;

      Input = React.createClass({
        displayName: 'Input',

        getInitialState: function getInitialState() {return {typed: ''};},

        onChange: function onChange(event) {
          this.setState({typed: event.target.value});
        },

        render: function render() {
          return cr('div', null,
            cr('div', null, '=>' + this.state.typed),
            cr('input', { type: 'text', onChange: this.onChange.bind(this)})
            );
          }
        });

        InputBlock = React.createClass({
        displayName: 'InputBlock',
        render: function render() {
          return cr('div', null, 
            cr('Input', null), 
            cr('Input', null)
            );
          }
        });

        root = InputBlock;
        var app = document.getElementById('app');
        ReactDOM.render(React.createElement(root, null), app);
});

Answer 1

你不想在输入附近有引号。作为字符串，它使用内置输入，而您需要自定义组件。此代码应适用于InputBlock：

InputBlock = React.createClass({
  displayName: 'InputBlock',
  render: function render() {
    return cr('div', null, 
      cr(Input, null), 
      cr(Input, null)
    );
  }
});

组件内的组件与香草JS

1 个答案: