4

簡単な例:

import * as React from 'react'
declare function getFish(x: any): any;
declare var Tank: any;

var Aquarium = ({species}) => (
  <Tank>
      {getFish(species)}
  </Tank>
);
let x = <Aquarium species="rainbowfish"/>;

結果：

(10,9): エラー TS2605: JSX 要素タイプ 'Element' は、JSX 要素のコンストラクタ関数ではありません。

エラーはコンポーネントの使用法に関するものであることに注意してください(let x 宣言)。React の定義ファイルがこれを有効な JSX として許可していないようです。tsd の最新の React 0.14 定義ファイルを使用していますが、何が間違っていますか?

次のステートレス機能コンポーネントを定義したとします (React v0.14)

let GreeterComponent = (props: {name: string}){
    return <div>Hi {props.name}!</div> 
}

別のコンポーネントでは、次のように使用しています。

class WrappingComponent extends React.Component{
    render(){
        let names = ['tom', 'john', 'simon'];
        return (
           <div className="names">
               {names.map((name)=> <GreeterComponent name={name} />)}
           </div>
          );
    } 
}

タイプスクリプトコンパイラからこのエラーが発生しています:

エラー TS2605: JSX 要素タイプ 'Element' は、JSX 要素のコンストラクター関数ではありません。タイプ 'Element' にプロパティ 'render' がありません。

どうすれば修正できますか？タイプスクリプトでステートレス機能コンポーネントを操作するのに正しいのは何ですか? tsdの最新のreact.d.tsを使用しています

4

3 に答える 3

0

@nextを使用して typescript をインストールする必要がありました:

npm install typescript@next --save-dev


この回答の時点で、@nextバージョンは1.9.0-dev.20160217.

最初は、問題はreact.d.tsor react-dom.d.ts... にあると思っていましたが、そうではありませんでした。これらの最新バージョンは、ここに既にインストールされています。しかし、本当の問題は、最新リリースである typescript バージョン 1.7.5 をインストールしたことです。


これに関する注意事項:ブログ投稿Using typescript@next nightly package?に従って –save-dev が最新であることを当てにしないでください。をインストールした後、 の依存関係をより大きなバージョン番号にnpm更新することに依存することはできません。typescript@next--save-dev

彼らが説明するnpm updateように、あるベータ版から次のベータ版に更新されないようです:

たとえば、依存関係の文字列"^1.6.0-dev.20150818"( 内package.json) は、パッケージをに更新しますが、実行時は に更新し1.6.0-dev.20150825ません。1.7.0-dev.20150901npm update

彼らが推奨するのは、npm --save-dev内部に保存されている依存関係文字列を変更して、常に最新バージョンの最新バージョンになるようにすることですpackage.json。"next"

{
  ...
  "devDependencies": {
    ...
    "typescript": "next",
    ...
  }
}

使用しているバージョンを完全に制御したいので、個人的には試しませんでした。とにかく走ることはほとんどありませnpm updateん。

于 2016-02-18T00:19:43.913 に答える
0

ステートレス コンポーネントを定義すると、それはプレーンでシンプルな関数になります。

インスタンス化する(つまり、に渡すReact.createElement) と、 でラップされReact.StatelessComponentます。

于 2016-01-12T19:43:20.717 に答える