React prop 不能传递给功能组件：“对象作为 React 子对象无效”

Question

我不知道为什么（我是 React 的新手）但是在尝试渲染一个简单的组件“Intros.js”时我遇到了一个简单的错误。 这是组件：

介绍.js：

import React from 'react';
import PropTypes from 'prop-types';

const Intros = (summary) => {
  return (
    <div className='intros'>
      ERROR HERE: {summary} variable can't be wrapped in curly braces; reason
      unknown
    </div>
  );
};

Intros.propTypes = {
  summary: PropTypes.string.isRequired,
};

Intros.defaultProps = {
  summary: 'Summary...',
};

export default Intros;

如果我将{summary}更改为summary则不会发生错误，但是我将无法在 App.js 中向下传递道具。 下面是 App.js 文件：

应用程序.js：

import React, { Fragment } from 'react';
import './App.css';
import Navbar from './components/layout/Navbar';
import Intros from './components/layout/Intros';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  NavLink,
} from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Intros />
      </Fragment>
    </Router>
  );
};

export default App;

请注意，上面没有传递任何道具，但无论如何都应该有一个默认道具。 下面也是在组件中使用{summary}时的错误：

Error occurred:
Objects are not valid as a React child (found: object with keys {summary}). If you meant to render a collection of children, use an array instead.
in div (created by Intros)
in Intros (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App
in StrictMode

为什么会发生此错误，以及如何更改 Intros.js 以使用 summary 变量作为道具？ 使用this.props.summary也会失败。

谢谢你的帮助。 这是一个Stackblitz演示

Answer 1

const Intros = (summary) => {

您已将变量命名为summary ，但这实际上是整个 props 对象，而不仅仅是 summary 道具。 要么将其称为 props，然后从中选择一个值：

const Intros = (props) => {
  const summary = props.summary;

或者使用对象解构来简写做同样的事情：

const Intros = ({ summary }) => {

Answer 2

您将props命名为summary 。
要解决您的问题，请使用下面的代码。

const Intros = (props) => {
  return (
    <div className='intros'>
      ERROR HERE: {props.summary} variable can't be wrapped in curly braces; reason
      unknown
    </div>
  );
};