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 <h1 style={myStyle}>网站名称:{this.props.name}</h1>; }}


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

     render() {

         return <h1>网站地址:{this.props.url}</h1>; }}


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

     render() { 

         return <h1>网站地址:{this.props.nickname}</h1>; }}

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

        return (        

             <div>            

                 <Name name={props.name}/>  

                  <Url url={props.url}/> 

                   <Nickname nickname={props.nickname}/>     

           </div>   

 );}

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

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

    <App name={"菜鸟教程"} url={"http://www.runoob.com"} nickname={"Runoob"}/>, 

       document.getElementById('example'));    

最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容