Question

尝试在react表中显示内容时出现一个非常烦人的错误，我想创建一个表并在行中显示所有值，但是由于某种原因，我收到此错误，指出必须将jsx元素包装在我试图在结果上映射的行旁边包含元素。任何帮助是极大的赞赏！！谢谢！！！

import React from "react";

import "./index.css";


// could also import the sass if you have a loader at dayz/dayz.scss

import moment from 'moment';
import { tasksRef, timeRef } from './firebase';
const defaultColor = "#000";


class Show extends React.Component {
  state = {
    Events: [],
   loading: true
  };


      render(){

    const { Events, Loading } = this.state;
    const orderedcars = Events;

    let List;


    if (Loading) {
      List = <div className="TaskList-empty">Loading...</div>;
    } else {

      List = (      
   <div>

<table>
  <thead>

              <tr>
                <th scope="row">Event Name</th>

                <th scope="row">Event date</th>


                <th scope="row">Event timeRef</th>

                </tr>
                  </thead>
                   <tbody>

                 {Events.map(car => (

                  <tr>
                <td>{car.name}</td>
                   <td>{car.timeRef}</td>
                   <td>{car.description}</td>


              </tr>

              </tbody>
</table>
            ))}

            </div>
           );
      }
 return(


 <div>


 {List}



   </div>
        );
    }



}


export default Show;

Answer 1

问题在于，闭合的tbody和table atgs应该位于外部map函数，如下所示

storeFile file('../livevotingkeystore')

Answer 2

您要将结束const importAll = require => require.keys().reduce((acc, next) => { acc[next.replace("./", "")] = require(next); return acc; }, {}); const images = importAll( require.context("./image", false, /\.(png|jpe?g|svg)$/) );和</tbody>标记放在赋予</table>的函数之外。

Events.map

相邻的Jsx元素必须包装在e中

2 个答案: