[英]React component throwing TypeScript error for function passed in as prop
[英]React Class is throwing a compile error regading function classs using TypeScript
我有一個反應對象,我試圖從一個函數轉換為一個類,以保存狀態並綁定我想傳遞給子組件的某些函數。 我收到一個錯誤,導致它無法編譯。
我試圖使用將傳遞到WidgetTile對象的狀態和函數創建的React Component。
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類語法都沒有錯。 請查閱並熟悉該語法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.