写一个显示时间日期的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script> <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script> <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> let element; function clock() { element = ( <div> <h1>Hello, World</h1> <h2>现在是{new Date().toLocaleTimeString()}</h2> </div> ); ReactDOM.render( element, document.getElementById('example') ); } clock(); setInterval(clock,1000); //console.log(element); </script> </body> </html>
注意如果要动态的显示时间的话reactDom要放在函数里面,因为这样才会多次调用函数。
let element; function clock() { element = ( <div> <h1>Hello, World</h1> <h2>现在是{new Date().toLocaleTimeString()}</h2> </div> ); } clock(); ReactDOM.render( element, document.getElementById('example') ); setInterval(clock,1000);
注意不能写成这样,这样子的话不会动态的显示时间,虽然element会动态的改变,但是的话,render还是只会执行一次
-------------------------------------------------------------------------------------------------------------------------------------------------------------
关于react里的this,第一次写组件
<script type="text/babel"> class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <div> <h1>Hello, World</h1> {console.log(this)}//输出为Clock组件 <h2>现在是{this.state.date.toLocaleDateString()}</h2> </div> ); } } ReactDOM.render( <Clock />, document.getElementById('example') ); </script>
要理解this的指向问题,直接把组件看出一个对象
然后render函数看成为一个方法,那么render又是在Clock里面所以this就指向了Clock
还有就是在写代码的时候区分开函数的书写方式,就好像代码里面constructor一样,注意里面分号 ; 的用法 ,以及还有一个传入参数的位置
还要理解一下props这个组件的属性,它是组件的属性,但是这个属性又是一个对象,所以里面可以装好多属性