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节点)的主要内容,如果未能解决你的问题,请参考以下文章

React入门---JSX内置表达式-6

react入门

React 从入门到入土-- 基础知识以及 jsx语法

React 从入门到入土-- 基础知识以及 jsx语法

React 入门 02 - JSX

React 入门 02 - JSX