reactjs新しいクラスはこれを実装する正しい方法ですか？

Question

は、私は（利用可能なゲームを示した）ロビークラス を開き、そこからあなたは、私は次の操作を行う新しいテーブルを開くためにゲームテーブル

を開くことができ、メインアプリケーション（ボードゲーム） があります

：レンダリングのために、その後

私はこれを行う。

var newTable = new GameTable(operationId, tableId, instanceId); 
var {gametables} = this.state; 
gametables.push(newTable); 
this.setState({gametables}); 

私はこの新しく作成したクラスに、これらの引数を与えることができる方法

（も文句はない!!!!そのが動作していないアイデアを持っています） 0

render() { 
    const clientLoginState = this.state.clientLoginState; 
    return (
     <div style={styleApp()} onContextMenu={this.onContextMenu} > 
     {clientLoginState === 2 ? 
     (
      <div> 
      <Lobby requestOpenTable={this.requestOpenTable}> 
      </Lobby> 
      {this.state.gametables.map((item, index) => (
       <div className='table' key={index} ><GameTable sendTableMessage={this.sendTableMessage.bind(this)}/></div> 
      ))}    
      </div>    
     ) 
     : 
     (
      <Login loginState={clientLoginState} sendLogin={this.sendLogin} /> 
     ) 
     } 
     </div> 
    ); 
    const tables = this.state.gametables.map((table, i) => { 
     return ({table}); 
    });     
} 

ここで私は "GameTable"を提供していますが、これは私が作成したクラスではありませんが、 "item"を提供すると動作しません。ゲームテーブルは表示されません。そう簡単にするために使用

ジャバスクリプト:(

Answer 1

const tables = this.state.gametables.map((table, i) => { 
     return ({table}); 
    }); 

方法はJSXコードが含まれてレンダリングします。ヘルパー関数に上記のコードを動かしてみて、renderメソッドからそれを呼び出す。

また、あなたのロジックないJSX内のヘルパー関数にする必要があります。

場所ヘルパー関数クラスコンポーネント内

renderTable(){ 
const tables = this.state.gametables.map((table, i) => { 
     return ({table}); 
    });  
} 

、あなたのJSXコール

{this.renderTable} 

完全なコード内部：

renderTable(){ 
    const tables = this.state.gametables.map((table, i) => { 
      return ({table}); 
     });  
    } 

renderView(){ 
    const clientLoginState = this.state.clientLoginState; 
     return (
      {clientLoginState === 2 ? 
      (
       <div> 
       <Lobby requestOpenTable={this.requestOpenTable}> 
       </Lobby> 
       {this.state.gametables.map((item, index) => (
        <div className='table' key={index} ><GameTable sendTableMessage={this.sendTableMessage.bind(this)}/></div> 
       ))}    
       </div>    
      ) 
      : 
      (
       <Login loginState={clientLoginState} sendLogin={this.sendLogin} /> 
      ) 
      } 
     ); 
    } 

render() { 
return (
<div style={styleApp()} onContextMenu={this.onContextMenu} > 
{this.renderView} 
</div> 
<div>{this.renderTable}</div> 
) 
}