React 组件 - 渲染返回抛出语法错误

Question

对 React 来说还是很新的，有一个奇怪的语法问题。 我正在创建一个 React 组件，我相信我有正确的打开/关闭 { & }，但我想我一定是因为它抛出的错误而遗漏了一些东西？ 这是我的代码。

 import React from 'react'; import { TreeList, SearchPanel, Scrolling, Lookup } from 'devextreme-react/tree-list'; import 'devextreme-react/text-area'; import 'whatwg-fetch'; import WireGrid from '../WireGrid.js' const expandedRowKeys = [1]; // const allowedPageSizes = [5, 10, 15, 20]; class WireTree extends React.Component { constructor(props) { super(props) this.state = { jsonData: null } this.onFocusedRowChanged = this.onFocusedRowChanged.bind(this) } async componentDidMount() { const url = "http://localhost:4741/wiretree"; const response = await fetch(url); const data = await response.json(); this.setState({ 'jsonData' : data.recordset }) } onFocusedRowChanged(e) { var rowData = e.row && e.row.data, cellValue if(rowData) { cellValue = e.component.cellValue(e.row.rowIndex, 'Filter'); module.export = cellValue if (!cellValue) { return null; } else { console.log('cellValue: ', cellValue) // <WireGrid /> } }} } render() { return ( <TreeList id="wireTree" dataSource={this.state.jsonData} dataStructure="plain" rootValue="" defaultExpandedRowKeys={expandedRowKeys} columnAutoWidth={true} keyExpr="categoryID" parentIdExpr="ParentID" wordWrapEnabled={true} focusedRowEnabled={true} virtualModeEnabled={true} onFocusedRowChanged={this.onFocusedRowChanged} > <SearchPanel visible={true} /> <Scrolling mode="standard" /> <Lookup dataSource={this.state.jsonData} valueExpr="ID" displayExpr="Search" /> </TreeList> ); } export default WireTree;

这是它在控制台中显示的错误，它指向 'render() {' 行：

 ';' expected. ts(1005) [42, 10]

不是 ts = TypeScript 吗？ 有什么想法吗？

Answer 1

在下面找到正确格式的代码

渲染放置在组件外部，而不是关闭组件 } 在渲染之前删除它并放置在渲染之后，如下所示

import React from 'react';
import { TreeList, SearchPanel, Scrolling, Lookup } from 'devextreme-react/tree-list';
import 'devextreme-react/text-area';
import 'whatwg-fetch';

const expandedRowKeys = [1];
class WireTree extends React.Component {
constructor(props) {
super(props)
this.state = {
jsonData: null
}
this.onFocusedRowChanged = this.onFocusedRowChanged.bind(this)
}

componentDidMount() {
fetch('http://localhost:4741/wiretree')
    .then((response) => response.json())
    .then(res => {
        this.setState({ jsonData: res });
    });
    }

 onFocusedRowChanged(e) {
 var rowData = e.row && e.row.data,cellValue
 if(rowData) {
 cellValue = e.component.cellValue(e.row.rowIndex, 'Filter');
 module.export = cellValue
 if (!cellValue) {
 return null;
  } else {
  console.log('cellValue: ', cellValue)
  }
 }} 

 render() {
 return (
 <TreeList
 id="wireTree"
 dataSource={this.state.jsonData}
 dataStructure="plain"
 rootValue=""
 defaultExpandedRowKeys={expandedRowKeys}
 columnAutoWidth={true}
 keyExpr="categoryID"
 parentIdExpr="ParentID"
 wordWrapEnabled={true}
 focusedRowEnabled={true}
 virtualModeEnabled={true}
 onFocusedRowChanged={this.onFocusedRowChanged}>

<SearchPanel visible={true} />
<Scrolling mode="standard" />
<Lookup
dataSource={this.state.jsonData}
valueExpr="ID"
displayExpr="Search" />

</TreeList>
);
}
}
export default WireTree;

Answer 2

函数onFocusedRowChanged有 { 太多。 您还需要在底部导出之前使用 } 关闭您的课程。