相关疑难解决方法(0)

我正在寻找下面的任何替代方法来创建一个包含1到N的JavaScript数组,其中N仅在运行时已知.

var foo = [];

for (var i = 1; i <= N; i++) {
   foo.push(i);
}

对我而言,感觉应该有一种没有循环的方法.

我写了一些代码来渲染ReactJS中的重复元素,但我讨厌它是多么丑陋.

render: function(){
  var titles = this.props.titles.map(function(title) {
    return <th>{title}</th>;
  });
  var rows = this.props.rows.map(function(row) {
    var cells = [];
    for (var i in row) {
      cells.push(<td>{row[i]}</td>);
    }
    return <tr>{cells}</tr>;
  });
  return (
    <table className="MyClassName">
      <thead>
        <tr>{titles}</tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
} 

有没有更好的方法来实现这一目标？

(我想for在模板代码中嵌入循环,或者类似的方法.)

我之前问了这个问题,在仔细考虑了这个话题之后,我开始想知道"陈述"和"表达"这两个词之间看似模糊的界限在哪里.所有陈述都是表达式吗？REPL控制台中的返回值来自哪里？它们似乎并不总是具有直观意义.当然,如果你输入1+1,你会得到2,但有时候它的逻辑并不明显.

鉴于在REPL中输入的任何内容都会产生一些价值,这是否意味着它可以在JS源代码中用作表达式和独立语句？

可以_X_在以下代码段中使用的代码串也可用于_Y_反之亦然？if(_X_) _Y_

我想为我的grid创建分页链接.我将maxPages(number)属性传递给组件,但我无法在render方法中使用.我能做什么 ？

var Pagination = React.createClass({

render: function(){


    return(
    <div class="text-center">
        <ul class="pagination">

            <li><a href="#">«</a></li>
            {for (var i=0;i <10;i++;)
            {
              return( <li><a href="#">i + 1 </a></li>);
            }
            }

            <li><a href="#">»</a></li>
        </ul>
    </div>);

}});

我想根据用户选择的播放器的数量来制作字段列表.我想做这样的事情:

generatePaymentField() {
    var noGuest = this.state.guest;
    var payment = 
    <View>
        <View>
            <View><Text>No</Text></View>
            <View><Text>Name</Text></View>
            <View><Text>Preference</Text></View>
        </View>;

    for (var i=0; i < noGuest; i++) {
        payment = payment + 
            <View>
                <View>
                    <TextInput />
                </View>
                <View>
                    <TextInput />
                </View>
                <View>
                    <TextInput />
                </View>
            </View>;
    }
    return payment;
}

render () {
    var payment = this.generatePaymentField();
    this.setState({payment : payment});
    return (
        <View>
            {this.state.payment}
        </View>;
    )
}

但react-native将上面的语法视为指向for循环行的"意外令牌".有没有其他方法可以实现这一目标？

目前,render方法只能返回单个元素/组件.见:这里

在该票据的讨论中,一些人建议将从React组件返回的多个元素包装在HTML注释中,以便浏览器忽略包装组件,例如:

<A>
    <B></B>
    <Fragment>
        <C></C>
        <D></D>
    </Fragment>
    <E></E>
</A>

会呈现给:

<a>
    <b></b>
    <!--<fragment data-reactid="">-->
        <c></c>
        <d></d>
    <!--</fragment>-->
    <e></e>
</a>

但是如何实际创建一个只呈现HTML注释的组件？换句话说,上面例子中'fragment'组件的render函数如何看起来像？

我只是在摆弄一些JS,发现了一些我认为不会发生的事情.

var arr = [,];
arr.length // 1
arr[0] // undefined

此外,[,,]长度为2.这些数组的长度不应该为0吗？我以为逗号只用于分隔数组中的元素,为什么看起来逗号被视为这些特定数组中的元素？数组的这种行为是否有任何类型的应用程序？

我很反应,我真正想要的是一个简单的for循环,为我的数组中的每个用户创建menuitem元素,标题是它们的名字.所以这就是我写它的方式,但我不知道怎么做反应.我认为它应该是一张地图,但我似乎无法让它工作,或希望任何人在这里可以帮助我.

for (var i = 0; i < Users.length; i++) {
  <MenuItem eventKey=[i]>User.firstname[i]</MenuItem>
}

很抱歉看起来是一个新手问题(一直工作到很晚,刚开始使用React)但是我想弄清楚如何只渲染一个n x n维的简单表.

例如,在我的组件中,渲染输出将是这样的:

      <table id="simple-board">
        <tbody>
          <tr id="row0">
            <td id="cell0-0"></td>
            <td id="cell0-1"></td>
            <td id="cell0-2"></td>
          </tr>
          <tr id="row1">
            <td id="cell1-0"></td>
            <td id="cell1-1"></td>
            <td id="cell1-2"></td>
          </tr>
          <tr id="row2">
            <td id="cell2-0"></td>
            <td id="cell2-1"></td>
            <td id="cell2-2"></td>
          </tr>
        </tbody>
      </table>

其中每一行都有自己的id,以及每个单元格.

初始状态

  constructor(props){
    super(props);
    this.state = {size: 3}
  }

是什么设置表的大小.

让我失望的是如何在JSX中实现for循环.

我对React有点小问题.我无法使用for循环创建嵌套组件.我想要做的是创建一个表格的9个单元格,然后为每一行创建3行,每行有3个单元格,然后将3行安装在一起,创建一个9x9的板.

假设我想得到类似的东西,但是使用循环

class Board extends React.Component {     
renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}

render(){    
    return(
        <div>
            <div className="board-row">
                {this.renderSquare(0)}
                {this.renderSquare(1)}
                {this.renderSquare(2)}
            </div>
            <div className="board-row">
                {this.renderSquare(3)}
                {this.renderSquare(4)}
                {this.renderSquare(5)}
            </div>
            <div className="board-row">
                {this.renderSquare(6)}
                {this.renderSquare(7)}
                {this.renderSquare(8)}
            </div>
        </div>
    );        
}

}

我搜索了其他问题几个小时,我认为我的代码几乎是正确的,但它没有呈现我想要的东西.我只得到一个白页.

这是我的代码:

class Board extends React.Component { 

renderSquare(i) {
    return <Square value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />;
}

createCells(i){
    if(i%3){return;}
    var index = this.fillN(Array(i)); //index=[0,1,2,3,4,5,6,7,8]
    var cells = [];
    index.forEach(function(i){
        cells.push(() => {
            return(
                <div>
                    {this.renderSquare(i)}
                </div>
            );
        }); …