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

Question

使用 React.js 在列表中添加两个额外按钮时出现以下错误。

Error:

./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;

我在这里添加了两个带有列表 i.e-li 元素 的按钮并得到了上述错误。我需要解决这些错误并在那里添加两个按钮。

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>