Transpilingエラーが反応：不動産は「IntrinsicAttributes」私は流星でアプリケーションを構築して反応し、活字体は私にtranspilingエラーを投げてい

Question

がタイプに存在しません：

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のような例があります。そうでなければ、おそらくアサーションを使用して、それを修正することができます：

export default createContainer(
    // ... 
) as React.ComponentClass<GameProps>; 

それとも、それが動作しない場合は、この方法を試してください。

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