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

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

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

render 放置在组件之外，而不是关闭组件 } 在渲染之前将其移除并放置在渲染之后，如下所示

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 末尾的 { 太多了。 您还需要在底部导出之前使用 } 关闭您的课程。