失败的道具类型:提供给“Body”的道具“app”无效，应为单个ReactElement

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

本文关键字：无效 ReactElement 单个 app Body 类型 失败      更新时间：2023-09-26

我正在尝试将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={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

相关文章：