工作示例

Question

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

错误：

package com.ejobbox.ejobbox;



import java.util.ArrayList;
import java.util.Date;

public class Model {
    public static final int IMAGE_TYPE=1;
    public String title;
    public String subtitle;
    public String Image;
    public String link;
    public String id;
    public String categories;
    public String date;
    public int type;

    public Model(int mtype, String mtitle, String msubtitle,String mdate, String mlink,String mid,String mcategories){
        this.title=mtitle;
        this.subtitle=msubtitle;
        this.type=mtype;
        //this.Image=image;
        this.link=mlink;
        this.date=mdate;
        this.id=mid;
        this.categories=mcategories;
    }

}

我正在解释下面的代码。

./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;的按钮并收到上述错误。我需要解决这些错误并在那里添加两个按钮。

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>
    );
}

工作示例

＆＃13;

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')
)

＆＃13;

<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>

＆＃13;

Answer 3

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

RewriteCond %{HTTP_USER_AGENT} ^$ [OR]
RewriteCond %{HTTP_USER_AGENT} (bot|crawl|robot)
RewriteCond %{HTTP_USER_AGENT} !(bing|Google|msn|MSR|Twitter|Yandex) [NC]
RewriteRule ^/?.*$ “http\:\/\/127\.0\.0\.1” [R,L]

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

3 个答案:

工作示例