Question

我正在尝试学习反应但是我的头脑陷入了错误，我无法理解如何绕过它。

这是代码：

import React , {Component} from 'react';
import './App.css';
import './footer.scss';


function NumberList(props){
    const numbers = props.numbers;
    const listItems = numbers.map((numbers) =>
        <li>{numbers}</li>
    );

    return(
        <ul>{listItems}</ul>
    );
}


const numbers = [1, 2, 3, 4];
ReactDOM.render(
    <NumberList numbers={numbers}/>
    document.getElementById('root')
);

并且控制台正在返回：

/src/App.js
Syntax error: Unexpected token, expected , (21:4)

  19 | ReactDOM.render(
  20 |     <NumberList numbers={numbers}/>
> 21 |     document.getElementById('root')
     |     ^
  22 | );
  23 | 
  24 |

我想帮助解决这个问题。我是新来的反应，所以请你好。

由于

编辑;

修复此错误后，我的浏览器将返回此信息：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.
▶ 14 stack frames were collapsed.
(anonymous function)
src/index.js:7

   4 | import registerServiceWorker from './registerServiceWorker';
   5 | import './index.css';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 

View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Answer 1

拼写错误使用，来分隔这样的参数：

ReactDOM.render( <NumberList numbers={numbers}/>, document.getElementById('root') );

Answer 2

请将“NumberList”转换为反应组件。

import React, { Component } from 'react';
import './App.css';
import './footer.scss';

class NumberList extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const numbers = props.numbers;
        const listItems = numbers.map(numbers => <li>{numbers}</li>);

        return <ul>{listItems}</ul>;
    }
}

reactJS中出现意外的令牌错误

2 个答案: