Question

m循环使用for in渲染功能它的给定语法错误我们不能在反应中使用这种方式以下是代码

render(){
    return(
        <table>               
             for(var i=0;i<this.props.TRlength;i++)                  
               <TRcomponent TDlength={this.state.tdLength} />                                                
        </table>
        )
}

引发的错误 `/src/Table.js 语法错误：D：/my-app1/src/Table.js：意外令牌（17:50）

           <table>

             for(var i=0;i<this.props.TRlength;i++)//error here
                                              ^

                  <TRcomponent TDlength={this.state.tdLength} />
              `

感谢您的帮助

Answer 1

React在渲染中的for循环中效果不佳。您不能为尚不存在的父母创建孩子。您需要首先创建子代。

此article详细介绍了此问题。

Answer 2

您可以将其存储在变量中，然后在jsx中使用

render() {
  var rows = [];
  for (var i=0;i<this.props.TRlength;i++) {
     // note: we add a key prop here to allow react to uniquely identify each
     // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
     rows.push(<TRcomponent TDlength={this.state.tdLength} key={i} />);
  }
  return < table >{rows}</table>;
}

for循环在渲染函数reactjs中不起作用

2 个答案: