https://github.com/coryhouse/react-slingshot/に基づくボイラープレートを用意しました。FuelSavings アプリを削除し、正常に動作するアプリに置き換えましたが、コンポーネントを作成しました。それをアプリの下に含めると、レンダリングが妨げられます (白いページが表示されます)。
<UserHeader />
タグを App.jsに追加すると、3 つのエラーが発生します。
- 「警告: React.createElement: type は null、undefined、boolean、または数値であってはなりません。文字列 (DOM 要素の場合) または ReactClass (複合コンポーネントの場合) である必要があります。 の render メソッドを確認してください
App
。」 - Uncaught Invariant Violation: 要素の型が無効です: 文字列 (組み込みコンポーネントの場合) またはクラス/関数 (複合コンポーネントの場合) が必要ですが、取得したのは未定義です。のレンダリング方法を確認してください
App
。 - キャッチされていない TypeError: 未定義のプロパティ 'props' を読み取れません
タグを削除するUserHeader
と、ページの残りの部分が問題なく読み込まれます。
src/コンポーネント/App.js
import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import { UserHeader } from './UserHeader';
const App = (props) => {
return (
<div>
<IndexLink to="/">Home</IndexLink> | <Link to="/About">About</Link>
<UserHeader />
{props.children}
</div>
);
};
export default App;
src/components/UserHeader.js
import React, { Component, PropTypes } from 'react';
const UserHeader = (props) => {
return (
<p>Welcome!</p>
);
};
export default UserHeader;
どんな考えでも大歓迎です。サーバー自体にはまったく問題はありません。小道具の検証が欠落しているという警告だけです。この問題は、コードのUserHeader
実行を妨げています。私は方法を知るのに十分な経験がありません!