反应:未终止的联署材料

Question

我是比较新的反应。我试图在App.js组件中拆分我的代码。现在，我收到了一个错误。

  ./src/containers/App.js
Syntax error: Unterminated JSX contents (64:12)

  62 |           Toggler = {this.togglerPersonHandler} />
  63 |           {person}
> 64 |       </div>
     |             ^
  65 |      )
  66 |    }
  67 | }

这是我的cockpit.js文件(cockpit.js中的)

import React from 'react';
import classes from './cockpit.css';

const Ccockpit = (props) => {
  const assignedClasses = [];
  let btnClass = ''
  btnClass = cockpit.red;

  if (cocPersonState) {
      btnClass = cockpit.red;
  }

  if (props.cocperson.length <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.cocperson.length <= 1) {
    assignedClasses.push(classes.bold)
  }
  return(
    <div className={classes.cockpit}>
      <h1> Hi I am react App</h1>
      <p className={assignedClasses.join(' ')}>hey </p>
      <button className={btnClass}
      onClick={props.Toggler}>Button</button>
    </div>
  );
}

export default Ccockpit;

这就是我在App.js文件(src/App.js/app.js)中所做的事情。

import React, { Component } from 'react';
import classes from './App.css';
import Cperson from '../components/person/person.js';
import Ccockpit from '../components/cockpit/cockpit.js';

class App extends Component {
(some code here) 

render() {
(some code here) 
return (
      <div className={classes.App}>
      <Ccockpit>
          cocPersonState = {this.state.showPerson}
          cocperson = {this.state.person}
          Toggler = {this.togglerPersonHandler} />
          {person}

      </div>
     )
   }
}
export default App;

知道这里有什么问题吗？也解决了同样的问题？

Answer 1

试试这个：

<Ccockpit
          cocPersonState = {this.state.showPerson}
          cocperson = {this.state.person}
          Toggler = {this.togglerPersonHandler} />