时间戳

首页 > 解决方案 > 功能组件未从 App 容器组件接收道具

javascript - 功能组件未从 App 容器组件接收道具

问题描述

您好，我正在尝试制作游戏并尝试渲染初始转弯模式并传递道具，该道具将根据应用程序的状态告诉它要显示哪些文本内容。目前，模态坐骑，但道具回来未定义。

这是 App 容器组件：

import ReactDOM from 'react-dom';
import Redux from 'redux';
import Board from './components/board';
import Piece from './components/piece';
import toggleTurn from './helper/toggleTurn';
import diceRoll from './helper/diceRoll';
import TurnModal from './components/TurnModal';

class App extends Component {
  constructor() {
    super();
    this.state = {
      game_not_over: null,
      curr_turn: null,
      player1: {
        playerId: 1,
        pieces: [],
        score: null
      },
      player2: {
        playerId: 2,
        pieces: [],
        score: null
      }
    }
  }
  componentDidMount() {
    this.startGame();
  }

  initPieces(player) {
    //Responsible for creating an array of Piece components
    let pieces = [];
    for(let i = 0; i < 4; i++) {
      pieces[i] = <Piece key={i} position={null} owner={player} />;
    }
    return pieces;
  }

  launchFirstTurnChoice() {
    ReactDOM.render(<TurnModal playerTurn={this.curr_turn} />, document.getElementById('root'));
  }
  
  launchTurn(playerId) {    
    const startTurnModal = <TurnModal modalmessage={"startTurnMessage"} />
    ReactDOM.render(startTurnModal, document.getElementById('root'));
    //Should display a modal that announces player turn and waits from them to press a start turn button
    //Rolls dice
    //Waits for player to select piece
    //Checks that a destination has been selected
    //Upon End Move Submission update piece position state
  }
  
  startGame() {
    console.log("Starting Game!");
    const player1 = this.state.player1;
    const player2 = this.state.player2;
    
    player1.pieces = this.initPieces();
    player2.pieces = this.initPieces();
    do {
      this.launchFirstTurnChoice();
    }
    while(this.state.game_not_over) {

    }
    
    
  }
  
  render() {
    return (
      <div>  
      </div>
    );
  }

}

export default App;

const startTurnMessage = "please roll the dice to decide first turn";

这是模态组件：

import React, { Component } from 'react';

//Props needed: current turn, 

const TurnModal = (props) => {
  console.log("TurnModal mounting!")
  console.log(props.modalmessage);
  return (
    <div className="Modal">
      <center>{props.modalmessage}</center>
    </div>
  );
}

export default TurnModal;

我也可以将应用程序逻辑放在容器组件中吗？

标签： javascriptreactjs

解决方案

发现我正在编辑一个重复的行，而不是我应该编辑的 ReactDOM.render() 调用。

推荐阅读