Facebook React.js : How to use components directly inside html as normal tags without mounting?

StackOverflow https://stackoverflow.com/questions/20795920

I am to create my custom tag :

/** @jsx React.DOM */

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});
var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  onChange: function(e) {
    this.setState({text: e.target.value});
  },
  handleSubmit: function(e) {
    e.preventDefault();
    var nextItems = this.state.items.concat([this.state.text]);
    var nextText = '';
    this.setState({items: nextItems, text: nextText});
  },
  render: function() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>
    );
  }
});

Without mounting from JSX

// React.renderComponent(<TodoApp />, document.body);

I intend to use it inside my HTML templates instead :

<div class="container">
    <TodoApp />    <!-- Doesn't work -->
</div>

Is it possible to use the react component tags directly inside html templates. Since it seems really inconvenient to mount it every-time from JSX/JS file.

有帮助吗?

解决方案

Not really. For one exploration into the possibilities here, see Custom Components: React & x-tags, but there isn't any supported way to do this.

Having to render the component from JS likely isn't too different from whatever JS you're currently using to attach events, etc. If your entire app can be rendered by one top-level React component (as is true for TodoApp) then you'll only need a single call to renderComponent.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top