组合实例

来源：互联网发布：spss统计软件最新版编辑：程序博客网时间：2024/06/15 12:15

组件不能修改自身的 props - 它们总是与它们拥有者设置的保持一致。
Avatar 拥有ProfilePic 和 ProfileLink 的实例
拥有者就是给其它组件设置 props 的那个组件

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>组合实例</title>    <!--      <script src="http://fb.me/react-{{site.react_version}}.js"></script>    <script src="http://fb.me/JSXTransformer-{{site.react_version}}.js"></script>     --></head><body><div id="demo"></div><script type="text/jsx">    // var LikeButton  = React.createClass({    //  demo:function(){},    // })    // var LikeButton = <LikeButton ></LikeButton>;    // React.render(LikeButton,document.getElementById('demo'))    var ProfilePic   = React.createClass({        render:function(){            return(<img src={'http://graph.facebook.com/' + this.props.username + '/picture'} alt="">)        }    });    var ProfileLink   = React.createClass({        render:function(){            return(<a href={'http://www.facebook.com/' + this.props.username}>{this.props.username}</a>);        }    });    var Avatar  = React.createClass({        render:function(){            return(                <div>                    <ProfilePic username={this.props.username}></ProfilePic>                    <ProfileLink username={this.props.username}></ProfileLink>                </div>)            },    })    var Avatar = <Avatar username="pwh"></Avatar>    React.render(Avatar,document.getElementById('demo'));</script></body></html>

阅读全文

0 0