Question

我使用jquery执行了以下操作。我希望使用react js来实现相同的功能，但我不知道如何多次渲染它。

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

React js code

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

您可以在渲染方法中编写html，只需更改

即可

componentDidMount : function(){

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

},

到

componentDidMount : function(){

       this.refs.nameInput.focus()

},

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

2 个答案: