在React类组件中,我在编写一个构建<select>
下拉列表的方法,并且Babel发出错误。该错误是由于第一个<select>
标记未关闭而引起的。我无法弄清楚这个正确的react-jsx语法。将jsx放入类组件方法时出现React-jsx语法错误
在下面的代码中,我试图将创建<select>
的代码封装到组件类中的另一个方法中。如果我有这个功能只是建立选项,并把<select>
和</select>
围绕该功能(在渲染方法),它的工作原理,但我想把选定的值放入<select>
标记,而不是使用if语句,加上保留它全部一起。
这是什么适当的语法?
谢谢...
与指向问题行注释代码:
render()
{
function buildQtyOptions(isAvailable, qty)
{
var opts = [];
if(!isAvailable)
{
opts.push(<td></td>);
return opts;
}
{/* Uncommenting this next line causes the error because the select is unclosed */}
{/* opts.push(<select>) */}
for (var i=1; i < 11; i++)
{
if(i === parseInt(qty))
{
opts.push(<option value={i} selected>{i}</option>);
}
else
{
opts.push(<option value={i}>{i}</option>);
}
}
{/* opts.push(</select>); */}
return opts;
}
{/* Other methods omitted here */}
return(
<tr>
<td>{getImage(this.props.available)}</td>
<td>{this.props.name}</td>
<td>
{/* I want to move this and the closing select into the buildQtyOptions method */}
{/*<select> */}
{ buildQtyOptions(this.props.available, this.props.years) }
{/*</select> */}
</td>
</tr>);
两个很好的答案,我希望我可以接受他们两个。谢谢菲利克斯和佩德罗。我本应该看到这一点。我知道巴别做了这个翻译,但是它的影响让我无法理解。我将更多地阅读React.createElement(); –