react入門-----（jsx文法，在react中擷取真實的dom節點）

標籤：handle   his   element   rip   names   console   turn   ref   指定   

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節點）