|
27 | 27 |
|
28 | 28 | </head> |
29 | 29 | <body> |
| 30 | + <a href="https://github.com/RickWong/ReactStyle"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> |
| 31 | + |
| 32 | + <h2>React Style component</h2> |
| 33 | + <p>React.js Style component allows you to cascade CSS stylesheets on your components, automatically namespacing them.</p> |
| 34 | + |
30 | 35 | <div id="profile0"></div> |
31 | 36 | <div id="profile1"></div> |
32 | 37 | <div id="profile2"></div> |
|
58 | 63 | } |
59 | 64 | "> |
60 | 65 | <div className="card"> |
61 | | - <img src="mao.jpg" /> |
| 66 | + <img src={this.props.image || 'mao.jpg'} /> |
62 | 67 | <p>{this.props.name || 'Default Mao'}</p> |
63 | 68 | </div> |
64 | 69 | </Style> |
|
96 | 101 | display: inline; |
97 | 102 | } |
98 | 103 | "> |
99 | | - <Profile name={this.props.name} /> |
| 104 | + {this.transferPropsTo(<Profile />)} |
100 | 105 | </Style> |
101 | 106 | ); |
102 | 107 | } |
|
133 | 138 | display: block; |
134 | 139 | } |
135 | 140 | "> |
136 | | - <Profile name={this.props.name} /> |
| 141 | + {this.transferPropsTo(<Profile />)} |
137 | 142 | </Style> |
138 | 143 | ); |
139 | 144 | } |
|
169 | 174 | margin: 0; |
170 | 175 | padding: 10px; |
171 | 176 | bottom: 0; |
| 177 | + font-weight: bold; |
172 | 178 | } |
173 | 179 | "> |
174 | | - <Profile name={this.props.name} /> |
| 180 | + {this.transferPropsTo(<Profile />)} |
175 | 181 | </Style> |
176 | 182 | ); |
177 | 183 | } |
178 | 184 | }); |
179 | 185 |
|
180 | 186 | React.renderComponent(<Profile />, document.getElementById('profile0')); |
181 | | - React.renderComponent(<FacebookProfile name="Facebook Mao" />, document.getElementById('profile1')); |
182 | | - React.renderComponent(<GoogleProfile name="Google Mao" />, document.getElementById('profile2')); |
183 | | - React.renderComponent(<TwitterProfile name="Twitter Mao" />, document.getElementById('profile3')); |
| 187 | + React.renderComponent(<FacebookProfile name="Facebook Mao" image="mao2.png" />, document.getElementById('profile1')); |
| 188 | + React.renderComponent(<GoogleProfile name="Google Mao" image="mao3.png" />, document.getElementById('profile2')); |
| 189 | + React.renderComponent(<TwitterProfile name="Twitter Mao" image="mao4.png" />, document.getElementById('profile3')); |
184 | 190 | </script> |
185 | 191 | </body> |
186 | 192 | </html> |
0 commit comments