React Js：如何使用模板渲染？

Question

我使用 jquery 做了以下操作。我想使用 react js 来实现同样的事情，但我不会多次渲染它。

jsFiddle-https://jsfiddle.net/uxzdfsLj/4/

反应js代码

import ReactDOM from 'react-dom';
import React from 'react';
import {render} from 'react-dom';
import $ from 'jquery';

var Note = React.createClass({
componentDidMount : function(){

       ReactDOM.findDOMNode(this.refs.nameInput).focus()

},

create:function(event){

    if(event.charCode == 13) {
    alert('Enter... (KeyPress, use charCode)');

}},


render :function(){
    return( 
    <div class="reply">
    <input type="text" class="text"  ref="nameInput" placeholder="Enter Text Here..." onKeyPress={this.create}></input>
    </div>
    )
}

});




ReactDOM.render(<Note/>, document.getElementById('app'));

Answer 1

您可以使用dangerouslySetInnerHTML 呈现用户输入的 HTML：

<div dangerouslySetInnerHTML={{__html: '<h1>Go</h1>'}} />

但是，请注意，您应该非常小心地使用它。如果输入的内容存储在服务器上某处并发送给其他用户，则用户输入的 HTML 可能会打开您的应用程序的安全漏洞。

Answer 2

你可以在 render 方法中编写你的 html 并改变你的

componentDidMount : function(){

       ReactDOM.findDOMNode(this.refs.nameInput).focus()

},

到

componentDidMount : function(){

       this.refs.nameInput.focus()

},