如何为 JSXTransformer 正确包装几个 TD 标签? [英] How to correctly wrap few TD tags for JSXTransformer?

查看:24
本文介绍了如何为 JSXTransformer 正确包装几个 TD 标签?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have an array with items and I want to make something like this:

<tr>
(until have items in array
<td></td><td></td>)
</tr>

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

But if I do that, I get an JSXTransformer error :

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

Adjacent XJS elements must be wrapped in an enclosing tag

工作版本:

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

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

I tried this one. But with <div> enclosing tag it doesn't work fine.

在这里回答:未捕获的错误:不变违规: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>

);})}</tr>);})}</tbody>

<块引用>

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

Please, advise me how to properly wrap few TD tags! I tried use a guide Dynamic Children, but JSXTransformer doesn't allow me do that.

推荐答案

返回多个没有包装元素的元素时,通常会出现以下错误

The following error usually occurs when you are returning multiple elements without a wrapping element

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

Adjacent XJS elements must be wrapped in an enclosing tag

喜欢

return (
    <li></li>
    <li></li>
);

这不起作用,因为您实际上返回了两个结果,您只需要返回一个 DOM 节点(有或没有子节点),例如

This doesn't work because you are effectively returning two results, you need to only ever be returning one DOM node (with or without children) like

return (
    <ul>
        <li></li>
        <li></li>
    </ul>
);

// or 

return (<ul>
    {items.map(function (item) {
        return [<li></li>, <li></li>];
    })}
</ul>);
    {items.map(功能(项目){返回 [<li></li>, <li></li>];})}</ul>);

For me to properly answer your question could you please provide a JSFiddle? I tried to guess what you're trying to do and heres a JSFiddle of it working.

为了让我正确回答您的问题,您能否提供一个 JSFiddle?我试着猜测你想要做什么,这里有一个 JSFiddle 的工作.>

当使用 div 作为包装器时,它实际上从未渲染到 DOM(不知道为什么).

When using the div as a wrapper its actually never rendered to the DOM (not sure why).

<tr data-reactid=".0.0.$1">
    <td class="info" data-reactid=".0.0.$1.$0.0">1</td>
    <td data-reactid=".0.0.$1.$0.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$1.0">1</td>
    <td data-reactid=".0.0.$1.$1.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$2.0">1</td>
    <td data-reactid=".0.0.$1.$2.1">2</td>
    <td class="info" data-reactid=".0.0.$1.$3.0">1</td>
    <td data-reactid=".0.0.$1.$3.1">2</td>
</tr>

React 16+

从 React 16 开始,你现在可以使用片段了.

Since React 16 you can now use fragments.

你现在会这样做

return <>
    <li></li>
    <li></li>
<>;

或者你可以使用 <> 是 HTML 片段的简写,它基本上只是一个临时的父元素,充当一个容器,一旦附加到文档中,它就不再存在.

Or you can use <React.Fragment>, <> is shorthand for a HTML fragment, which basically is just a temporary parent element that acts as a container, once its appended to the document it no longer exists.

https://reactjs.org/docs/fragments.html

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

这篇关于如何为 JSXTransformer 正确包装几个 TD 标签?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆