react入门-----(jsx语法,在react中获取真实的dom节点)

2021-06-08 19:02

阅读:280

标签:handle   his   element   rip   names   console   turn   ref   指定   

1、jsx语法

 1 var names = [‘Alice‘, ‘Emily‘, ‘Kate‘];
 2         
 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 awesomeh2>,
17         ]
18         
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>
                        
                        
                        input type="text" ref="myTextInput" onChange={this.changeClick}/>
                        input type="text" value="Focus the text input" onClick={this.handleClick}/>
                    div>
                )
            }
        })
        
        ReactDOM.render(
            MyComponent/>,
            document.getElementById(‘continer‘)
        )

 

react入门-----(jsx语法,在react中获取真实的dom节点)

标签:handle   his   element   rip   names   console   turn   ref   指定   

原文地址:http://www.cnblogs.com/songdongdong/p/7306159.html


评论


亲,登录后才可以留言!