有三种方式,这里简单笔记,后续更新
-
方式一:"常量"法定义
const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> );
适用于简单组件,通常在xx.js文件,被其他组件调用
- 方式二:函数法定义
function BoilingVerdict(props) {
if (props.celsius >= 100) {
return <p>水会烧开</p>;
}
return <p>水不会烧开</p>;
}
适用于简单组件,通常在xx.js文件,被其他组件调用。(这里也可以用es6定义)
- 方式三:ES6 class 类来定义
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
适用于组件里有复杂逻辑,我把他称做应用组件
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。