<tbody> 中的 ReactJS 空白文本节点

Question

由于某种原因，将变量 'row' 分配为空时，会引发以下错误：

空白文本节点不能作为 .确保源代码每一行的标签之间没有任何多余的空格

 render(){

    if(typeof(this.props.settings) ==="undefined"||Object.keys(this.props.settings).length==0)
    {
      //We haven't asked for Admins yet, so they don't exist.
       row ='';
    }
    else {
     ...
      row = nameArray.map((data,index) =>
    <tr key={index}><td>{data}</td>
      <td>{idArray[index]}</td>
      <td><div className="link_decoration" onClick={()=>this.props.removeRequest(idArray[index])}>Remove</div></td>
    </tr>
    );
  }
    return(
      <div>
        <table>
        <tbody><tr><th>Name</th><th>SSO</th><th></th></tr>{row}</tbody></table>
      </div>
    );

  }
}

我可以通过创建占位符而不是设置 row='' 来解决错误：

      nameArray.push("PlaceHolder");
      idArray.push("12345");
      row = nameArray.map((data,index) =>
    <tr key={index}><td>{data}</td>
      <td>{idArray[index]}</td>
      <td><div className="link_decoration" onClick={()=>this.props.removeRequest(idArray[index])}>Remove</div></td>
    </tr>
    );
    }

但必须有更好的方法......

Answer 1

你可以解决它

<tbody><tr><th>Name</th><th>SSO</th><th></th></tr>{row.length > 0 ? row :null }</tbody></table>

有关渲染及其返回类型的更多详细信息，请参阅here

另外，缩进代码也是个好主意。

Answer 2

不使用“三元运算符”：

<tr>
    <td>1</td>
    {boolean ? <td>2</td> : ''}
    <td>3</td>
</tr>

使用“&&”运算符：

<tr>
    <td>1</td>
    {boolean && <td>2</td>}
    <td>3</td>
</tr>