javascript - React Class 使用 TypeScript 抛出编译错误
问题描述
我有一个反应对象,我试图将它从一个函数转换为一个类,以保存状态并绑定我想传递给子组件的某些函数。我收到一个错误,导致它无法编译。
我尝试使用将传递到 WidgetTile 对象的状态和函数创建的 React 组件。
import React from "react";
...
export default class WidgetToolbar extends React.Component{
constructor(props){
super(props)
this.state={
targetBox:null,
};
this.dragStart = this.dragStart.bind(this);
this.dragEnd = this.dragEnd.bind(this);
this.drop = this.drop.bind(this);
};
const isOpen = useBehavior(mainStore.isWidgetToolbarOpen);
const themeClass = useBehavior(mainStore.themeClass);
const userDashboards = useBehavior(dashboardStore.userDashboards);
const [filter, setFilter] = useState("");
const [sortOrder, setSortOrder] = useState<SortOrder>("asc");
const userWidgets = useMemo(() => {
let _userWidgets = values(userDashboards.widgets).filter((w) => w.widget.isVisible);
if (sortOrder === "asc") {
_userWidgets.sort((a, b) => a.widget.title.localeCompare(b.widget.title));
} else {
_userWidgets.sort((a, b) => b.widget.title.localeCompare(a.widget.title));
}
if (!isBlank(filter)) {
_userWidgets = _userWidgets.filter((row) => {
return row.widget.title.toLowerCase().includes(filter.toLocaleLowerCase());
});
}
return _userWidgets;
}, [userDashboards, sortOrder, filter]);
dragStart = (e) => {
// this is initiated whenthe drag starts.
console.log(e.target.id);
console.log('drag start');
this.setState({
targetbox: true,
selectedId: e.target.id
});
this.createPopup();
e.dataTransfer.setData("text", e.target.id);
}
dragEnd = (e) => {
// the following is activated when the drag is ended
console.log('ended drag');
this.setState({
targetBox:null
});
this.destroyPopup();
}
drop = (e) => {
console.log("end drag dt: " + e.dataTransfer.getData("text"));
console.log("end drag t:" + e.target.id);
console.log('set start: ' + this.state.iterating);
}
createPopup = () => {
console.log("create Popup");
}
destroyPopup = () => {
console.log("destroy popup");
}
render(){
return(
<Overlay
isOpen={isOpen}
hasBackdrop={false}
canOutsideClickClose={true}
canEscapeKeyClose={true}
onClose={mainStore.closeWidgetToolbar}
className={Classes.OVERLAY_SCROLL_CONTAINER}
>
<div className={classNames(styles.toolbar, className, themeClass)} data-element-id="widgets-dialog">
<h3 className={styles.toolbarTitle}>Widgets</h3>
<div className={styles.toolbarMenu}>
<InputGroup
placeholder="Search..."
leftIcon="search"
round={true}
// TODO - Implement mainstore widget filter
// onChange={handleStringChange(this.mainStore.setWidgetFilter)}
value={filter}
onChange={handleStringChange(setFilter)}
data-element-id="widget-search-field"
/>
<SortButton order={sortOrder} onClick={setSortOrder} />
<Button minimal icon="pin" />
<Button minimal icon="cross" onClick={mainStore.closeWidgetToolbar} />
</div>
<hr />
<div className={Classes.DIALOG_BODY}>
<div className={styles.buttonBar}>
<Button text="Prev" icon="caret-left" small={true} disabled={true} />
<span className={styles.currentPage}>Page 1</span>
<Button text="Next" icon="caret-right" small={true} disabled={true} />
</div>
<ul className={styles.widgetList}>
{userWidgets.map((userWidget) => (
<li key={userWidget.id}>
<UserWidgetTile
userWidget={userWidget}
dragStart={this.dragStart}
dragEnd={this.dragEnd}
drop={this.drop}/>
</li>
))}
</ul>
</div>
</div>
</Overlay>
)
};
};
我得到的编译错误如下:
./src/components/widget-toolbar/WidgetToolbar.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\src\components\widget-toolbar\WidgetToolbar.tsx: Unexpected token (35:10)
33 |
34 |
> 35 | const isOpen = useBehavior(mainStore.isWidgetToolbarOpen);
| ^
36 | const themeClass = useBehavior(mainStore.themeClass);
37 |
38 | const userDashboards = useBehavior(dashboardStore.userDashboards);
at Object.raise (C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\node_modules\@babel\parser\lib\index.js:3851:17)
at Object.unexpected (C:\Users\ojandali\Documents\dev\ozone1\ozone-framework-client\packages\application\node_modules\@babel\parser\lib\index.js:5167:16)
解决方案
constructor(props) {
...
}; // <- semicolon here is invalid syntax in class
// v- const is also invalid syntax in class
const isOpen
基本上你对 ES6 类语法都搞错了。请查阅并熟悉该语法。
推荐阅读
- css - 现有按钮上的循环渐变效果
- bash - 无法将控制台输出重定向到文件
- sql-server - SqlException:列名“ClientId1”无效
- python - 从类中创建对象时如何留出内存?
- reactjs - 如何等到设置上下文值 | 反应钩子
- sql-server - Power BI 在按钮单击事件上使用用户参数执行存储过程
- javascript - 如何使用 mocha 测试将 XML 字符串发布到本地 API?
- c++ - 在 Qt 信号和槽中使用 lambda 语法并访问传递的参数
- node.js - SyntaxError: JSON 输入意外结束,同时在'...: {"name":"@babel/plug'附近解析?
- java - Tomcat 套接字侦听超时