相关疑难解决方法(0)

如何为JSXTransformer正确包装少量TD标签?

我有一个包含项目的数组,我想做这样的事情:

<tr>
(until have items in array
<td></td><td></td>)
</tr>
Run Code Online (Sandbox Code Playgroud)

但是,如果我这样做,我得到一个JSXTransformer错误:

相邻的XJS元素必须包装在一个封闭的标签中

工作版本:

{rows.map(function (rowElement){
    return (<tr key={trKey++}>
        <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td>
        <td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td>
                 .......
        </tr>);
})}
Run Code Online (Sandbox Code Playgroud)

我试过这个.但是使用<div>封闭标签它不能正常工作.

在这里回答: 未捕获错误:不变违规:findComponentRoot(...,... $ 110):无法找到元素.这可能意味着DOM意外地发生了变异

<tbody>
    {rows.map(function (rowElement){
        return (<tr key={trKey++}>
        {rowElement.row.map(function(ball){
            console.log('trKey:'+trKey+' td1stKey'+td1stKey+' ball.value:'+ball.value+' td2ndKey:'+td2ndKey+' ball.count:'+ball.count);
            return(<div key={divKey++}>
                <td className='info' key={td1stKey++}>{ball.value}</td><td key={td2ndKey++}>{ball.count}</td>
            </div>);
        })}
        </tr>);
    })}
</tbody>
Run Code Online (Sandbox Code Playgroud)

请告诉我如何正确包装少量TD标签! 我尝试使用指南Dynamic Children,但JSXTransformer不允许我这样做.

reactjs react-jsx

52
推荐指数
2
解决办法
3万
查看次数

Next.js - 使用另一个 &lt;div&gt;&lt;/div&gt; 会引发错误,为什么?

请耐心等待,我刚刚开始探索 Next.js ...我找不到有关两次使用 html 标签时出现的错误的任何信息。它仅适用于一个容器,但一旦我添加另一个容器,我就会得到:

Error: error: Unexpected token "div". Expected jsx identifier

html javascript next.js

5
推荐指数
1
解决办法
1万
查看次数

React.js 解析错误:必须将相邻的 JSX 元素包装在封闭标记中。你想要一个 JSX 片段 &lt;&gt;...&lt;/&gt; 吗?

我正在尝试使用引导程序构建一个反应应用程序,该应用程序将展示类似于 CCC 的卡片显示为连续 3 行,并且有 3 行,但我收到此错误:

解析错误:相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...?

这是代码:

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import { Card } from "react-bootstrap";
import { Button } from "react-bootstrap";

function App() {
  return (
    <Card>
      <Card.Img variant="top"
        src="holder.js/100px160" />
      <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>
          This is a wider card with supporting text below as a natural lead - in to
        additional content.This content is a little bit longer.
        </Card.Text>
      </Card.Body>
    </Card>
    <Card>
      <Card.Img variant="top" src="holder.js/100px160" /> …
Run Code Online (Sandbox Code Playgroud)

javascript css reactjs react-bootstrap

1
推荐指数
1
解决办法
1351
查看次数

标签 统计

javascript ×2

reactjs ×2

css ×1

html ×1

next.js ×1

react-bootstrap ×1

react-jsx ×1