Question

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.

Was it helpful?

Solution

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top