Transpiling錯誤陣營：物業不上鍵入「IntrinsicAttributes」

Question

我建立與流星的應用程序和反應，打字稿被扔我一個transpiling錯誤存在：

Property 'gameId' does not exist on type 'IntrinsicAttributes & {} & { children?: ReactNode; }

我有一個組件應用，該應用呈現組件遊戲，像這樣：

render() { 
    return (
     <div className="container"> 
      {this.state.gameId ? <Game gameId={this.state.gameId} /> : this.renderNewGameButtons()} 
     </div> 
    ); 
} 

Game是React.Component的延伸，並且如下面的定義。如您所見，我已將gameId定義爲GameProps接口中的道具。爲什麼我仍然收到這個錯誤？

interface GameProps { 
    game?: any, 
    gameId?: string, 
    subscriptionLoading?: boolean, 
} 

interface GameState { 
    isAscending: boolean, 
} 

class Game extends React.Component<GameProps, GameState> { 
    constructor() { 
    super(); 
    this.state = { 
     isAscending: true, 
    } 
    } 
    updateGame(game) { 
    Meteor.call('games.update', this.props.gameId, game.history, game.xIsNext, game.stepNumber); 
    } 
    handleClick(i) { 
    const history = this.props.game.history.slice(0, this.props.game.stepNumber+1); 
    const current = history[history.length - 1]; 
    const squares = current.squares.slice(); 
    if (calculateWinner(squares) || squares[i]) { 
     return; 
    } 
    squares[i] = this.props.game.xIsNext ? 'X' : 'O'; 

    this.props.game.history = history.concat([{ 
     squares: squares 
    }]); 

    this.props.game.xIsNext = !this.props.game.xIsNext; 
    this.props.game.stepNumber = history.length; 

    this.updateGame(this.props.game); 
    } 
    jumpTo(step) { 
    this.props.game.stepNumber = step; 
    this.props.game.xIsNext = (step % 2) ? false : true; 

    this.updateGame(this.props.game); 
    } 

    resortMovesList() { 
    this.setState({ 
     isAscending: !this.state.isAscending, 
    }) 
    } 

    render() { 
    if (this.props.subscriptionLoading) { 
     return <div>Game is loading.</div> 
    }; 

    const history = this.props.game.history; 
    const current = history[this.props.game.stepNumber]; 
    const winner = calculateWinner(current.squares); 

    let status; 
    if (winner) { 
     status = "Winner: " + winner; 
    } else { 
     status = "Next player: " + (this.props.game.xIsNext? 'X' : 'O'); 
    } 

    const moves = history.map((step, move) => { 
     if (!this.state.isAscending) { 
     move = history.length - move - 1; 
     } 
     const desc = move ? 
     'Move #' + move : 
     'Game start'; 
     return (
     <li key={move} className={move === this.props.game.stepNumber ? 'current-move' : ''}> 
      <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a> 
     </li> 
    ); 
    }); 

    return (
     <div className="game"> 
     <div className="game-board"> 
      <Board 
      squares={current.squares} 
      onClick={(i) => this.handleClick(i)} 
      /> 
     </div> 
     <div className="game-info"> 
      <div>{status}</div> 
      <ol>{moves}</ol> 
      <button onClick={() => this.resortMovesList()}> 
      {this.state.isAscending ? 'Sort Descending' : 'Sort Ascending'} 
      </button> 
     </div> 
     </div> 
    ); 
    } 
} 

let gameContainer: any; 

export default gameContainer = createContainer(props => { 
    const gamesSubscription = Meteor.subscribe('games'); 
    const subscriptionLoading = !gamesSubscription.ready(); 
    const game = Games.findOne(props.gameId); 

    return { 
    subscriptionLoading, 
    game, 
    }; 
}, Game); 

Answer 1

我相信問題來自您使用gameContainer: any。 TS不知道你的模塊導出了什麼，當然不是Game類，所以你嘗試渲染它時會出錯。我認爲createContainer是一個HOC，這很難正確輸入，但你可以找到例子，如Redux connect。可以幫助你http://stackoverflow.com/questions -

export default createContainer(
    // ... 
) as any as typeof Game;