版权声明：转载请注明作者（独孤尚良dugushangliang）出处： https://blog.csdn.net/dugushangliang/article/details/90546878
react的render中<类名 参数={}/>如<Clock date={new Date()}/>是什么意思。
在看react的官方文档，看的有些稀里糊涂，又从菜鸟教程起步，有些地方不太懂是什么原因。多方参照，终于悟出来了这个问题，特此记录。
参阅菜鸟教程的页面：https://www.runoob.com/react/react-rendering-elements.html，可以打开这个界面并修改成下面的代码https://www.runoob.com/try/try.php?filename=react-rendering-elements4。
<!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"> class Clock extends React.Component { render() { return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.props.date.toLocaleTimeString()}.</h2> <p>{JSON.stringify(this.props)}</p> </div> ); } } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('example') ); } setInterval(tick, 1000); </script> </body> </html>明眼人可以看出，这个其实只需要添加一行代码：<p>{JSON.stringify(this.props)}</p>。
添加后执行的效果类似这样：
这说明，<Clock date={new Date()} />是一个组件，这个组件会调用Clock类的render函数，这个函数会返回一个jsx，就是return()的括号中的内容。括号中的内容直接在html上是什么就是什么，但在这里，加上{}这对花括号的代表要使用JavaScript的东西。如果不加花括号，显示的就是我们看到的这些代码，加上花括号了，系统会把花括号的内容当代码执行而不是当文本看。<Clock date={new Date()} />这个组件被调用的时候，会传递一个object对象，这个对象的值只有一个——date={new Date()}，因为new Date()被花括号包含，所以不是作为文本而是作为JavaScript代码，获取当前时间。这个object传递到Clock类中后通过this.props来调取。通过代码<p>{JSON.stringify(this.props)}</p>看到的页面上显示证明了这点。
独孤尚良dugushangliang——著
