我正在尝试将我的 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>
}
关于javascript - 失败的 Prop 类型 : Invalid prop `app` supplied to `Body` , 需要一个 ReactElement，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38427631/