0

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実行を妨げています。私は方法を知るのに十分な経験がありません!

4

1 に答える 1