Question

在我的React项目中，我仅手动创建了一个组件Person.js，在App.js组件中出现语法错误。

这是Person.js组件

import React from 'react'

const person = () => {
    return <p>I'm person</p>
}

export default person

这是App.js组件

import React from 'react';
import './App.css';
import Person from './Person/Person'

function App() {
   state = {
    persons: [
      { name: 'Vamsi', age: 21 },
      { name: 'Shiva', age: 19 },
      { name: 'Angle', age: 24 }
    ]
  }
  render() {
    return (
      <div className="App">
        <Person name={this.state.persons[0].name}
          age={this.state.persons[0].age}>
        </Person>
        <Person name={this.state.persons[1].name}
          age={this.state.persons[1].age}>
        </Person>
        <Person name={this.state.persons[2].name}
          age={this.state.persons[2].age}>
        </Person>
        {/* <button>Switch Name</button> */}
      </div>
    );
  }
}


export default App;

我能够在App.js组件中看到语法错误。

Answer 1

您的App组件应声明为类类型

Answer 2

问题仅在此行中

function App() {

您不能在render内使用functional component。 render函数只能在class based component中使用。

只需将该行更改为

class App extends React.Component {

Demo

Answer 3

第一：尝试更改：

function App() {

为

class App extends React.Component {

render（）函数继承自React.Component类

App.js会像这样

import React from 'react';
import './App.css';
import Person from './Person/Person'

class App extends React.Component {
   state = {
    persons: [
      { name: 'Vamsi', age: 21 },
      { name: 'Shiva', age: 19 },
      { name: 'Angle', age: 24 }
    ]
  }
  render() {
    return (
      <div className="App">
        <Person name={this.state.persons[0].name}
          age={this.state.persons[0].age}>
        </Person>
        <Person name={this.state.persons[1].name}
          age={this.state.persons[1].age}>
        </Person>
        <Person name={this.state.persons[2].name}
          age={this.state.persons[2].age}>
        </Person>
        {/* <button>Switch Name</button> */}
      </div>
    );
  }
}
export default App;

第二：如果要查找每个人的组件以打印其姓名和年龄，则必须在Person.js中添加以下内容

import React from 'react'

class Person extends React.Component {
    render(){
    return (
        <div>
            <p>I'm {this.props.name} and I'm {this.props.age} years old</p>
        </div>
        );
    }
}

export default Person

在我的一个React组件中，我在项目中陷入了语法错误

3 个答案: