react入门-----(jsx语法,在react中获取真实的dom节点)
2021-06-08 19:02
标签:handle his element rip names console turn ref 指定 1、jsx语法 2、获取真实的DOM节点 react入门-----(jsx语法,在react中获取真实的dom节点) 标签:handle his element rip names console turn ref 指定 原文地址:http://www.cnblogs.com/songdongdong/p/7306159.html 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 )
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节点)
文章链接:http://soscw.com/index.php/essay/92334.html