道具类型失败：提供给“Body”的道具“app”无效，需要单个ReactElement答案

【问题标题】：Failed prop type: Invalid prop `app` supplied to `Body`, expected a single ReactElement道具类型失败：提供给“Body”的道具“app”无效，需要单个ReactElement
【发布时间】：2016-07-18 01:58:00
【问题描述】：

我正在尝试将我的 App 组件传递给我的 Body 组件。它可以工作，而且看起来效果很好，但我在控制台中收到了上述警告。这是我的代码：

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;

没有其他错误，App 渲染良好，所以我不确定propType 失败的原因。任何帮助将不胜感激！

【问题讨论】：

您是否有任何理由将您的应用程序作为属性而不是子项传递？你可以这样做：<Body><App /></Body> 然后在你的 Body.js 中，用 {this.props.children} 切换 <App/>

标签： javascript reactjs ecmascript-6 react-jsx

【解决方案1】：

<Body app={App} />

App 还不是 React Element，它是一个用于创建 App Element 的函数 (PropTypes.func)。

这就是你现在正在传递的内容

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

如果你想传递一个 React 元素，你应该使用 <App/> 而不是 App

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

就像

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

这样你就可以像这样渲染它

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

jsfiddle

【讨论】：