-
因项目某些页面需要重构, 使用了ReactJs, 所以做了一些小demo
-
源码地址,含有wiki
1.JSX使得在模板插入js变量
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组，则会展开这个数组的所有成员 var arr = [ <h1 id="Hellow-Pan"> Hellow, Pan </h1>, <h2 id="I-like-React-very-much"> I like React very much! </h2>, ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); </script> </body></html> 2.ReactDomTest
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1 id="Hello-world">Hello, world!</h1>, document.getElementById('example') ); </script> </body></html> 3.使用JSX支持JS与HTML混用
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var names = ['Shine', 'Pans', 'Panshang']; //jsx可以让html和js混用, <>是html, {}是js ReactDOM.render( <div> { names.map(function (name){ return <div> Hello, {name}!</div> }) } </div>, document.getElementById('example') ); </script> </body></html> 4.创建组件
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //HelloMessage 是一个组件类。模板插入 <HelloMessage /> 时，会自动生成 HelloMessage 的一个实例 var HelloMessage = React.createClass({ render: function(){ return <h1 id="Hello-this-props-name">Hello, {this.props.name}</h1>; } }); ReactDOM.render( <HelloMessage name = "Pan" />, document.getElementById('example') ); </script> </body></html> 5.使用属性 props
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //NoteList 组件有两个 span 子节点，它们都可以通过 this.props.children 读取 var NotesList = React.createClass({ render: function() { return ( <ol> { React.Children.map(this.props.children, function (child) { return <li>{child}</li>; }) } </ol> ); } }); ReactDOM.render( <NotesList> <span>hello</span> <span>Pan! </span> </NotesList>, document.body ); </script> </body></html> 6.PropsType
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MyTitle = React.createClass({ //要求title的属性的data类型是string,只能是string propTypes: { title: React.PropTypes.string.isRequired, }, render: function() { return <h1 id="this-props-title"> {this.props.title} </h1>; } }); //测试部分, 将title属性设置成 int类型, 然后会报错 //将123用引号包起来标示为字符串类型将不在报错 var data = 123; ReactDOM.render( <MyTitle title = {data} />, document.body ); </script> </body></html> 7.使用默认属性 GetDefaultProps
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //获取默认的属性 //获取的是title的值 var MyTitle = React.createClass({ getDefaultProps : function () { return { title : 'shinepans' }; }, render: function() { return <h1 id="this-props-title"> {this.props.title} </h1>; } }); ReactDOM.render( <MyTitle />, document.body ); </script> </body></html> 8.获取真实dom
<!DOCTYPE html><html> <head> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({ handleClick: function() { //监听点击事件, 聚焦输入框 this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput" /> <input type="button" value="Focus the text input" onClick={this.handleClick} /> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example') ); </script> </body></html> 9.通过State改变状态
<!DOCTYPE html><html> <head> <meta charset="utf-8")> </meta> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function() { return {liked: false}; }, handleClick: function(event) { this.setState({liked: !this.state.liked}); }, //转换状态, 喜欢或不喜欢 render: function() { var text = this.state.liked ? '喜欢了' : '还没喜欢'; return ( <p onClick={this.handleClick}> 你{text}这个.点击文本改变你的状态. </p> ); } }); ReactDOM.render( <LikeButton />, document.getElementById('example') ); </script> </body></html> 10.使用表单监听,更好的用户交互
<!DOCTYPE html><html> <head> <meta charset="utf-8")> </meta> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> //监听textarea的变化, 变化了就更新p标签里的内容 //下面初始化了 输入框和p的初始值 var Input = React.createClass({ getInitialState: function() { return {value: '请在文本框输入文本'}; }, handleChange: function(event) { this.setState({value: event.target.value}); }, render: function () { var value = this.state.value; return ( <div> <textarea rows="10" cols="30" value={value} onChange={this.handleChange} /> <p>{value}</p> </div> ); } }); ReactDOM.render(<Input/>, document.body); </script> </body></html> 11.使用JSBIn 直接在浏览器运行,调试JSX 很方便
- JSBib网址
令文字渐变效果, 使用了props, 计时器等, 源码参考开始时给出的源代码地址
by: 潘尚
time: 2016.1.30
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，
如何使用HTML5表單驗證屬性來驗證用戶輸入？Mar 17, 2025 pm 12:27 PM本文討論了使用HTML5表單驗證屬性，例如必需的，圖案，最小，最大和長度限制，以直接在瀏覽器中驗證用戶輸入。
如何高效地在網頁中為PNG圖片添加描邊效果？Mar 04, 2025 pm 02:39 PM本文展示了使用CSS為網頁中添加有效的PNG邊框。 它認為，與JavaScript或庫相比，CSS提供了出色的性能，詳細介紹瞭如何調整邊界寬度，樣式和顏色以獲得微妙或突出的效果
＆lt; datalist＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:33 PM本文討論了html＆lt; datalist＆gt;元素，通過提供自動完整建議，改善用戶體驗並減少錯誤來增強表格。Character計數：159
＆gt; gt;的目的是什麼 元素？Mar 21, 2025 pm 12:34 PM本文討論了HTML＆lt; Progress＆gt;元素，其目的，樣式和與＆lt; meter＆gt;元素。主要重點是使用＆lt; progress＆gt;為了完成任務和LT;儀表＆gt;對於stati
我如何使用html5＆lt; time＆gt; 元素以語義表示日期和時間？Mar 12, 2025 pm 04:05 PM本文解釋了HTML5＆lt; time＆gt;語義日期/時間表示的元素。 它強調了DateTime屬性對機器可讀性（ISO 8601格式）的重要性，並在人類可讀文本旁邊，增強Accessibilit
＆lt; meter＆gt;的目的是什麼。 元素？Mar 21, 2025 pm 12:35 PM本文討論了HTML＆lt; meter＆gt;元素，用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了＆lt; meter＆gt;從＆lt; progress＆gt;和前
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
3 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
3 週前ByDDD
熱工具
禪工作室 13.0.1
強大的PHP整合開發環境
SublimeText3漢化版
中文版，非常好用
SublimeText3 Linux新版
SublimeText3 Linux最新版
記事本++7.3.1
好用且免費的程式碼編輯器
Dreamweaver CS6
視覺化網頁開發工具
