相关疑难解决方法(0)

我正在尝试设置我的React.js应用程序,以便只有在我设置的变量为true时才会呈现.

我的渲染功能的设置方式如下:

render: function() {
    var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
    var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
    return (
    <div>

if(this.state.submitted==false) 
{

      <input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />

      <ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
      <div className="button-row">
         <a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
     </div>
     </ReactCSSTransitionGroup>
}
   </div>
    )
  },

基本上,这里的重要部分是if(this.state.submitted == false)部分(我希望在提交的变量设置为false时显示这些div).

但是在运行时,我在问题中得到错误:

未捕获的错误:解析错误:第38行:相邻的JSX元素必须包装在一个封闭的标记中

这是什么问题？我可以用什么来完成这项工作？

我在React的嵌套循环中做错了什么？我在谷歌搜索过信息,但没有找到合适的信息.你能帮我找到,我理解错了吗？

从图中可以看出,我在变量中有数据.它工作正常.但是当我添加一个不是从这个值的值时<tr>,会出现错误!

    var TableBalls80 = React.createClass({
        render:function(){
            var rows = this.props.rows;
            var columnId = 0, trKey = 0, divKey = 0, td1stKey = 0;
            var td2ndKey = 100;
            return(
                    <table className='table table-bordered bg-success'>
                                <thead>
                                <tr className='danger'>
                                    {rows[0].row.map(function (element){
                                        columnId++;
                                        return (
                                        <th colSpan="2" key={columnId}>{columnId}</th>);
                                    })}
                                </tr>
                                </thead>
                                <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>
                            </table>);
        }
    });

错误(取决于从另一个项目添加的项目<tr>):

未捕获错误:不变违规:findComponentRoot(...,.0.1.1.0.2.0.0.1.$ 0. …

想像:

return (<a href="{this.props.url}">{this.props.name}</a><br>)

也尝试过

return (<a href="{this.props.url}">{this.props.name}</a><br />)

虽然脚本确实运行没有问题,但JSX编译器却被它打乱了 <br>标签,因为它在逻辑中只是一只狼,并且没有开放/关闭标记.

如果另一方面我删除了 <br>

return (<a href="{this.props.url}">{this.props.name}</a>)

没有抛出任何错误,就问题而言,这是非常自我解释的.但问题是如何解决潜在的问题.我怎么能有这个标签(或者如果需要的话还有它的等价物).在上述每个渲染语句之后添加.

需要注意的是,这是一个urls/names循环,它在页面上生成一个html链接列表.到目前为止减去这个因素的一切都有效.

总体而言,潜在的问题是美学问题.我正在使用bootstrap,因为事情是相当统一的,我不想创建一次性类或内联样式来适应换行符.这纯粹是出于可维护性的考虑.