react入门-----(jsx语法,在react中获取真实的dom节点)
Posted Ethan
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react入门-----(jsx语法,在react中获取真实的dom节点)相关的知识,希望对你有一定的参考价值。
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节点)的主要内容,如果未能解决你的问题,请参考以下文章