-
interface 命名
程序报错：interface name must start with a capitalized I
interface 的命名必须以 大写 I 开头。
-
组内的导入源
程序报错：Import sources within a group must be alphabetized
组内的导入源必须按照字母顺序依次导入。
举个错误例子：
import Home from "./Home"
import About from "./About"
正确写法：
import About from "./About"
import Home from "./Home"
-
类方法 render 的权限
程序报错：The class method 'render' must be marked either 'private', 'public', or 'protected'
类方法“render”必须标记为“private”、“public”或“protected”。
讲一下这条错误出现的情况：
我在 index.tsx 中引入ES6 class 定义的子组件。子组件中的render() 函数前没有 private、public 或 protected 程序会报错。但是在我这个情况下，只有使用 public 前缀时代码可以正常运行，使用其他两个前缀程序仍然报错（其他错误）无法运行，这个情况目前还未探究。
-
组件传递的 Props
组件传递 Props 和 javascript 不同的是，需要通过参数的形式显示传递 Props 组件才可以获取到。
这里举一个 类组件 的例子：
// ./src/components/Person.tsx
interface IProps {
name: string;
age: number
}
class Person extends React.Component<IProps>{
constructor(props: IProps) {
super(props)
}
}
public render() {
return (
<div>
<p>姓名：{ this.props.name }</p>
<p>年龄：{ this.props.age }</p>
</div>
)
}
// ./src/index.tsx
ReactDOM.render(
<div>
<Person name="张三三" age={11} />
</div>,
document.getElementById("root") as HTMLElement
)
这里再举一个 函数式组件 的例子：
// Person.tsx
// 父组件与上面例子相同
interface IProps {
name: string;
age: number;
}
function Person( { name, age }: IProps ) {
return (
<div>
<p>姓名：{ name }</p>
<p>年龄：{ age }</p>
</div>
)
}
-
组件中的 State
组件的 State 与 Props 类似，也是需要通过定义 State 接口的方式来设置 State。
这里也举一个例子：
interface IState {
currentTime: Date;
}
interface IProps {
country: string;
}
class Zone extends React.Component<IState, IProps> {
constructor(props: IProps) {
super(props);
this.state = {
curTime: new Date
}
}
public render() {
return (
<div>
国家：{ this.props.country }, 当前时间：{ this.state.curTime.toString() }
</div>
)
}
}
