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

Question

我正在尝试将我的 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 失败的原因。如有任何帮助，我们将不胜感激！

Answer 1

<Body app={App} />

App 还不是 React 元素，它是一个用于创建 App 元素的函数(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

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

Failed prop type: Invalid prop `app` supplied to `Body`, expected a single ReactElement

javascript

ecmascript-6

reactjs

react-jsx