失败的道具类型：提供给`Body`的无效道具'app`，期望一个ReactElement

Question

I'm trying to pass my App component to my Body component. 我正在尝试将我的App组件传递给我的Body组件。 It works and it seems to render fine, but I'm getting the above warning in my console. 它工作，似乎渲染得很好，但我在我的控制台中收到了上述警告。 Here is my code: 这是我的代码：

Document.js 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 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 App.js

import React from 'react';

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

export default App;

There are no other errors, and the App is rendering fine, so I'm not sure why the propType is failing. 没有其他错误， App正常渲染，所以我不确定为什么propType失败。 Any help would be appreciated! 任何帮助，将不胜感激！

Answer 1

<Body app={App} />

App is not a React Element yet, its a function( PropTypes.func ) which is used to create the App Element. App不是React Element，它是一个用于创建App Element的函数（ PropTypes.func ）。

This is what you are passing right now 这就是你现在正在经历的

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

If you want to pass a React Element, you should use <App/> instead of App 如果要传递React元素，则应使用<App/>而不是App

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

which is like 这就像

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

so you'll be able to render it like this 所以你将能够像这样呈现它

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

jsfiddle 的jsfiddle

失败的道具类型：提供给`Body`的无效道具'app`，期望一个ReactElement

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-07-18 04:45:49

失败的道具类型：提供给`Body`的无效道具&#39;app`，期望一个ReactElement

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-07-18 04:45:49

失败的道具类型：提供给`Body`的无效道具'app`，期望一个ReactElement

解决方案1
3 已采纳 2016-07-18 04:45:49