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元素，它是一个函数（PropTypes.func），用于创建App元素。

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

<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

1 个答案: