instactを与えるReactJSは関数エラーではありません

私は奇妙なエラーUncaught TypeError: inst.render is not a functionを受け取ったとき、ReactとReactDOMの本当の基本的なHello Worldを表示していました。このJSBinにそれを見てください。instactを与えるReactJSは関数エラーではありません

私はReactをたくさん使いましたが、ES6には初めてです。私がここで見ていないものは何ですか？

Helloにはrenderメソッドがありませんが、わかりません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src=" 
       https://cdnjs.cloudflare.com/ajax/libs/redux/3.0.4/redux.js" type="text/javascript"></script> 
    <script src="https://fb.me/react-0.14.0.js"></script> 
    <script src="https://fb.me/react-dom-0.14.0.js"></script> 
</head> 
<body> 
    <div id="root"></div> 

    <script> 
const Hello =() => { 
    <h1>Hi</h1> 
}; 

const foo =() => { 
    ReactDOM.render(
    <Hello />, 
    document.getElementById('root') 
); 
} 

foo(); 
</script> 
</body> 
</html>

出典

2015-12-10 Don P

更新

また、あなたの場合にはfunction、またはarrowを使用することができます。ただし、コンポーネントを返す必要があります。

const Hello =() => <h1>Hi</h1>;

欠落している中括弧に注目してください。 ES6では、中括弧なしのarrow functionは、その本体式の結果を返します。

オリジナル

ES6と反応して使用するには、React.Componentクラスを継承する必要があります。

class Hello extends React.Component { 
    render() { 
    return <h1>Hi</h1> 
    } 
}

hereのマニュアルを参照してください。

出典

2015-12-10 08:34:53 PSWai

Strange - Reduxの作成者は、このビデオの 'const MyComponenter =（）=> {...}'を使用します：https://egghead.io/lessons/javascript-redux-react-counter-example ＃/ tab-discuss。それはどのように機能していますか？ –

ああ、プレーン関数を使用している場合、要素を返す必要があります。（編集を参照してください） – PSWai

うわー、それは素晴らしいです。気づいていただきありがとうございます:) –

レンダリングしていたコンポーネントがundefinedのときにこのエラーが発生しました。以前はこのエラーを見たことがなかった。私のアプリもreduxを使っていました。

私の場合、定義されていないrender()メソッドのコンポーネントは<Book />でした。

ので修正は簡単だった：

import Book from './Book'

私のアドバイスあなたがこの問題に実行する場合は、コンテナコンポーネントのレンダリング方法を確認し、レンダリングしようとしているすべてのコンポーネントが定義されていないかどうかを確認することです。

キャッチされない（約束で）にReferenceErrorが：：今

出典

2016-02-19 01:40:54

別の解決策は、implicit returnを使用することです定義されていない

それは私には非常に奇妙なようだが、それは次のエラーを与える必要があります。私は誤って私のコンポーネントのconstructorでreturn someObjを呼んでいたので、単純にそう（JSBin）

const Hello =() => (
    <h1>Hi</h1> 
);

出典

2016-03-23 02:55:01 thetrystero

のように、代わりに中括弧の括弧内Helloコンポーネントのリターンを包む私はこのエラーを得ました。一度それを取り除くと、問題は解決しました。私はwebstorm /糸くずの推薦で、アプリケーション・コンポーネントにstaticキーワードを追加したとき

出典

2017-04-01 19:10:37

ありがとうございます！私はgetInitialState（）に慣れていて、コンストラクタからも状態を返しました！乾杯！ –

私はこのエラーを得ました。staticキーワードを削除してください。 static App extends Component {...

出典

2017-08-08 14:29:24 JimSTAT

instactを与えるReactJSは関数エラーではありません

答えて

関連する問題