2019-10-09

一下来源于菜鸟教学粘在这方便复习，原网站https://www.runoob.com/react/react-rendering-elements.html，如有侵权通知即刻删除。

改版写法:

 1. 使用 ES6 类写法，用 this.props.属性名 来取值。

 2. 可以多层 props 来传值，在 ReactDOM.render 定义属性值，传给调用方法 App，再在调用的ES6类调用中用 props.属性直接赋值过去。

var myStyle = {color:'red',textAlign:'center'}

class Name extends React.Component {. //定义组件Name

     render() { 

         return

网站名称：{this.props.name}

; }}

class Url extends React.Component {  //定义组件Url

     render() {

         return

网站地址：{this.props.url}

; }}

class Nickname extends React.Component { //定义组件Nickname

     render() { 

         return

网站地址：{this.props.nickname}

; }}

function App(props) {    //在函数App中调用组件，及组件的参数props

        return (        

             

            

                   

                   

                        

           

   

 );}

多个属性的传入注意不用逗号或分号隔开而是空格符隔开:

ReactDOM.render( //viewmodel模块渲染，渲染时执行函数app，并往函数app中传入多个参数

    , 

       document.getElementById('example'));