由于某种原因,将变量'row'指定为空时,会抛出以下错误:
空白文本节点不能作为子节点出现。确保源代码的每一行上的标记之间没有任何额外的空格
"autoload": {
"psr-4": {"PhpmlExercise\\": "src/"}
},
我可以通过创建占位符而不是设置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>
);
}
}
但必须有更好的方法......
答案 0 :(得分:3)
你可以用
来解决它<tbody><tr><th>Name</th><th>SSO</th><th></th></tr>{row.length > 0 ? row :null }</tbody></table>
有关渲染及其返回类型的更多详细信息,请参阅here
另外,缩进代码是个好主意。
答案 1 :(得分:0)
不使用“三元运算符”:
<tr>
<td>1</td>
{boolean ? <td>2</td> : ''}
<td>3</td>
</tr>
使用“ &&”运算符:
<tr>
<td>1</td>
{boolean && <td>2</td>}
<td>3</td>
</tr>