使用React.js添加按钮时出错

Question

我使用React.js在列表中添加两个额外的按钮时收到以下错误。

错误：

./src/TodoItems.js
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (10:46)
   8 |  
   9 |   createTasks(item) {
> 10 |     return <li key={item.key}>{item.text}</li><a href="" class="button bg_green">Edit</a><a href=""class="button bg_red">Delete</a>
     |                                               ^
  11 |   }
  12 |  
  13 |   render() {

我在下面解释我的代码。

import React, { Component } from "react";
class TodoItems extends Component {
  constructor(props, context) {
    super(props, context);

    this.createTasks = this.createTasks.bind(this);
  }

  createTasks(item) {
    return <li key={item.key}>{item.text}</li><a href="" class="button bg_green">Edit</a><a href=""class="button bg_red">Delete</a>
  }

  render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
      <ul className="theList">
          {listItems}
      </ul>
    );
  }
};

export default TodoItems;

这里我添加两个按钮，列表ie-li element并得到上述错误。 我需要解决这些错误并在那里添加两个按钮。

Answer 1

import { Fragment } from 'react'

 createTasks(item) {
return 
       <Fragment>
            <li key={item.key}>{item.text}</li>
            <a href="" class="button bg_green">Edit</a>
            <a href=""class="button bg_red">Delete</a>
       </Fragment>

}

Answer 2

因为你想要创建一个列表，所以应该像纯HTML一样：

<ul>
  <li>
      Some Text
      <a href="" class="button bg_green">Edit</a>
      <a href=""class="button bg_red">Delete</a>
  </li>
  <!-- ... -->
</ul>

如果要返回多个组件，则需要将它们包装在父笔记中。 在这种情况下，您可以使用li标签来获得正确的html语义。 另外，您需要将关键字class更改为className 。

createTasks(item) {
    return (
        <li key={item.key}>
            {item.text}
            <a href="" className="button bg_green">Edit</a>
            <a href=""className="button bg_red">Delete</a>
        </li>
    )
}

render() {
    var todoEntries = this.props.entries;
    var listItems = todoEntries.map(this.createTasks);

    return (
        <ul className="theList">
            {listItems}
        </ul>
    );
}

工作实例

 class TodoItems extends React.Component { constructor(props, context) { super(props, context); this.createTasks = this.createTasks.bind(this); } createTasks(item) { console.log(item) return ( <li key={item.key}> {item.text} <a href="" className="button bg_green">Edit</a> <a href=""className="button bg_red">Delete</a> </li> ) } render() { var todoEntries = this.props.entries; var listItems = todoEntries.map(this.createTasks); return ( <ul className="theList"> {listItems} </ul> ); } } const entries = [ { key: 1, text: "Lern some Vanila JavaScript" }, { key: 2, text: "Lern some React" } ] ReactDOM.render( <TodoItems entries={entries}/>, document.querySelector('#app') ) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

尝试在createTasks方法中包装返回的值：

  createTasks(item) {
    return 
           <div>
                <li key={item.key}>{item.text}</li>
                <a href="" class="button bg_green">Edit</a>
                <a href=""class="button bg_red">Delete</a>
           </div>
  }