react入門-----(jsx語法,在react中獲取真實的dom節點)
阿新 • • 發佈:2017-08-08
rip opp blog alice code text fault 通過 cnblogs
1、jsx語法
1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘]; 2 <!-- HTML 語言直接寫在 JavaScript 語言之中,不加任何引號,這就是 JSX 的語法,它允許 HTML 與 JavaScript 的混寫 --> 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8 }) 9 } 10 </div>, 11 document.getElementById(‘example‘) 12 ); 13 14 var arr =[ 15 <h1>Hello world!</h1>, 16 <h2>React is awesome</h2>, 17 ]18 <!-- JSX 允許直接在模板插入 JavaScript 變量。如果這個變量是一個數組,則會展開這個數組的所有成員 --> 19 var ArrComponent = React.createClass({ 20 render: function() { 21 return <div> 22 {arr} 23 </div> 24 } 25 })26 ReactDOM.render( 27 <ArrComponent/>, 28 document.getElementById(‘continer‘) 29 )
2、獲取真實的DOM節點
var MyComponent = React.createClass({ handleClick: function(event) { this.refs.myTextInput.focus() event.stopPropagation() event.preventDefault() }, changeClick: function(event) { console.log(event.target.value) }, render: function() { return ( <div> <!-- 給虛擬dom添加ref屬性 --> <!-- 然後可以在函數中通過 ReactDOM.findDOMNode(this.refs.tip)來獲取真實的dom節點--> <input type="text" ref="myTextInput" onChange={this.changeClick}/> <input type="text" value="Focus the text input" onClick={this.handleClick}/> </div> ) } }) <!-- ReactDOM.render 是 React 的最基本方法,用於將模板轉為 HTML 語言,並插入指定的 DOM 節點。 --> ReactDOM.render( <MyComponent/>, document.getElementById(‘continer‘) )
react入門-----(jsx語法,在react中獲取真實的dom節點)