组件内的组件与 vanilla JS 发生反应

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)
        );
      }
    });

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

我知道我错过了一些明显的东西，但我对 react.js 还是很陌生，还看不到全貌。 请帮忙。

最终代码的完整实现

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

您不想在 Input 周围加上引号。作为字符串，它使用内置输入，而您需要自定义组件。这段代码应该适用于 InputBlock：

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