失敗した小道具タイプ：無効な小道具 `app`が` Body`に供給されました。単一のReactElementを期待しました。

BodyにAppコンポーネントを渡そうとしています。それは動作し、それはうまく表示されますが、私は私のコンソールで上記の警告を得ています。ここに私のコードは次のとおりです。失敗した小道具タイプ：無効な小道具 `app`が` Body`に供給されました。単一のReactElementを期待しました。

Document.js

import React from 'react'; 
import Head from './Head'; 
import Body from './Body'; 
import App from '../timer/App'; 

const Document =() => (
    <html> 
    <Head /> 
    <Body app={App} /> 
    </html> 
); 

export default Document;

Body.js

import React, { PropTypes } from 'react'; 

const Body = ({ app: App }) => (
    <body> 
    <App /> 
    <script src='/js/bundle.js'></script> 
    </body> 
); 

Body.propTypes = { 
    app: PropTypes.element.isRequired 
}; 

export default Body;

App.js

import React from 'react'; 

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

export default App;

Tここに他のエラーはありません。Appはうまく表示されていますので、なぜpropTypeが失敗しているのか分かりません。どんな助けもありがとう！

出典

2016-07-18 saadq

あなたは属性ではなく、子として、あなたのアプリケーションを渡している理由は、何らかの理由はありますか？あなたはこれを行うことができます： ''あなたのBody.jsで、 '{this.props.children}'で '' – jzm

<Body app={App} />

App、まだアプリ要素を作成するために使用され、その機能（PropTypes.func）リアクト要素ではありません。

これは、あなたが反応要素を渡したい場合は、あなたが<App/>代わりのApp

<Body app={React.createElement(
     'div', 
     null, 
     React.createElement(
      'h1', 
      null, 
      'Hello' 
     ) 
)} />

のようなものです

<Body app={<App/>} />

を使用する必要がありますあなたが今

<Body app={function App() { 
    return React.createElement(
    'div', 
    null, 
    React.createElement(
     'h1', 
     null, 
     'Hello' 
    ) 
); 
}} />

を渡しているものです

このようにレンダーすることができます

const Body = ({ app }) => { 
    return <body> 
     {app} 
     <script src='/js/bundle.js'></script> 
     </body> 
}

jsfiddle

出典

2016-07-18 04:45:49 QoP

失敗した小道具タイプ：無効な小道具 `app`が` Body`に供給されました。単一のReactElementを期待しました。

答えて

関連する問題