反応するネイティブアプリのレンダリング機能にJavascriptコードを含めるにはどうすればよいですか？

Question

私はリアクションでネイティブのnoobに反応するので、おそらく非常にばかげた質問になるでしょうが、どのように私のコンポーネントを含めるためにレンダリング関数内で 'forループ'を使うことができますか？これは私が

render() { 
    return (
    <View style={styles.container}> 
     { for (let i=0; i<20; i++) 
     { 
      //This is my component 
      <CounterButton /> 
     } 
     } 
    </View> 
); 
} 

やったことですが、それはので、私は今、私はエラーを参照してくださいいけない

createButtons() { 
    for (let i =0; i<20; i++){ 
    <CounterButton />; 
    } 
} 

render() { 
    return (
    <View style={styles.container}> 
     {this.createButtons()} 

    </View> 
); 
} 

をした後、誰かがメソッドのコードが含まれており、レンダリング関数の内部でそれを呼び出すことが示唆、エラーを投げましたしかし、ただの空白の画面。私はあなたが小道具にアクセスできるのは知っていますが、レンダリング機能は主にJSXコードのみを含むはずですか？前もって感謝します。

Answer 1

Jsxには、コンポーネントまたはコンポーネントの配列を返す式を含めることができます。あなたの場合、コンポーネントの配列を返すものが必要です。

createButtons() { 
    let buttons = []; 
    for (let i=0; i<20; i++){ 
    buttons.push(<CounterButton />); 
    } 
    return buttons; 
} 

あなたはJSXでそれをやってみたかった場合は、このような何かが動作するはずです：：React.jsとして

render() { 
    return (
    <View style={styles.container}> 
     {[...Array(20).keys()].map(<CounterButton />)}  
    </View> 
); 
} 

Answer 2

createButtons関数は何も返しません。 ボタンを配列に追加して戻すことができます。素子のアレイをレンダリングするときに反応する、天然、各要素がkey性を有することが必要

createButtons() { 
    const buttons = []; 
    for (let i =0; i<20; i++){ 
    buttons.push(<CounterButton />); 
    } 
    return buttons; 
} 

注意。