42 lines
804 B
JavaScript
42 lines
804 B
JavaScript
// 第一种定义组件的方式
|
|
// function Welcome(props) {
|
|
// return <h1>hello, {props.name}</h1>;
|
|
// }
|
|
// ReactDOM.render(
|
|
// Welcome({name:"cuto"}),
|
|
// document.getElementById('root')
|
|
// );
|
|
|
|
|
|
///第二种定义组件的方式
|
|
// class Welcome extends React.Component {
|
|
// render() {
|
|
// return <h1>hello, {this.props.name}</h1>;
|
|
// };
|
|
// }
|
|
// const e= <Welcome name="cuto"/>;
|
|
// ReactDOM.render(
|
|
// e,
|
|
// document.getElementById('root')
|
|
// );
|
|
|
|
|
|
// 组合组件使用
|
|
class Welcome extends React.Component {
|
|
render() {
|
|
return <h1>hello, {this.props.name}</h1>;
|
|
};
|
|
}
|
|
|
|
const e = (
|
|
<div>
|
|
<Welcome name="cuto"></Welcome>
|
|
<Welcome name="love"></Welcome>
|
|
</div>
|
|
);
|
|
|
|
ReactDOM.render(
|
|
e,
|
|
document.getElementById('root')
|
|
);
|