函数作为 React 子项无效？

Question

我试图弄清楚为什么会发生这种情况，我在 App 中有以下代码来使用我制作并传入的一些道具来渲染子组件：

function App() {
  const items = [
    {
      label: 'Hello',
      content: 'Testing Content'
    },
    {
      label: 'Something else',
      content: 'More Content'
    },
    {
      label: 'Final',
      content: 'Last Content'
    }
  ]

  return (
    <div className="App">
      <Accordion displayData={items} />
    </div>
  );
}

export default App;

在我的手风琴组件中，我使用 props 并调用 map 将一些 jsx 返回到 return 语句，理论上应该会产生我的列表：

function Accordion({
    displayData,
    ...otherProps
}) {

    function displayAccordionItems () {
        displayData.map((itm, idx) => {
            return (
                <div key={idx}>
                    <p>{itm.label}</p>
                    <p>{itm.content}</p>
                </div>
            )
        })
    }
    return <div>Hello from accordion {displayAccordionItems}</div>;
}

export default Accordion;

道具中没有任何内容呈现，并且控制台中出现错误。我尝试通过引用

{displayAccordionItems}

调用它并使用

{displayAccordionItems()}

执行它，两种方法都会产生相同的错误。

我已经查看了此类问题的先前解决方案，但其中很多都使用了我不在这里的类组件，并且需要使用 () 执行该方法，而不是通过我已经尝试过的引用来尝试它。

任何解释或文档参考都会非常方便！

Answer 1

这样更改你的代码，

 function Accordion({ displayData, ...otherProps }) {
    function displayAccordionItems() {
        // Return the result of map
        return displayData.map((itm, idx) => {
            return (
                <div key={idx}>
                    <p>{itm.label}</p>
                    <p>{itm.content}</p>
                </div>
            );
        });
    }
    // Call displayAccordionItems to render its return value
    return <div>Hello from accordion {displayAccordionItems()}</div>;
}

export default Accordion;