Question

我必须从具有实现的JSON生成表单。生成表单组件不是问题，但是我无法创建<span class="row">来分隔表单输入。

在我的表单组件渲染方法中，我迭代json数据并将每个组件（文本字段，下拉列表等）放入数组中，然后将其返回。

render()
{
    return <span className="row"> { this.buildForm() } </span>
}

这很好用，但是每个输入都打印在一行中，所以当实现必须管理输入列时出现问题。

所以我需要动态创建行跨度。在我的json中，我为每个输入字段放置了一个特定的属性，分别称为“ rowstart”和“ rowend”，因此我知道该输入是开始新行还是关闭新行。

例如，如果我有两个输入，而cols = 6，则第一个输入将具有rowstart = true，第二个输入将具有rowend = false

问题来自渲染。我无法在渲染中放置打开或关闭标签。

if (attributes.rowstart)
{
   formRender.push(<span className="row">);
}
switch(attributes['type'])
{
   case 'string': formRender.push(<TextField .... />); break;
   [...]
}
if (attributes.rowend)
{
    formRender.push(</span>);
}

渲染器不允许打开/关闭标签，因为它现在可以确定在下一次迭代中会发生什么，因此无法确定打开标签是否会真正关闭。

有办法解决吗？

在StackOverlow上搜索，我发现了这篇文章，但与我所需要的有所不同。 stack post

Answer 1

我建议您将行设为顶级数组元素，并将所有其他输入作为行的子级

```

if (attributes.rowstart && attributes.children.length)
{
    let row = (<span className="row">{attributes.children.map((input)=> <Input key={input.name} /> )}</span>);
    formRender.push(row);
}

```

ReactJs-添加打开和关闭标签而没有语法错误

1 个答案: