在 React 中从函数传递数组的正确语法是什么？

Question

我对 React 完全陌生，并且正在努力将字符串数组从一个组件传递到另一个组件。

我一直在尝试理解this来帮助我，但我很难将逻辑应用到我的具体情况。有关更多背景信息，请参阅下面的内容：

基本上，我有这个：

export default function TitleData(){
  return (
     ["My Title Test"]
    );
}

我正在尝试将

TitleData

函数返回的数组传递给此函数。

import './App.css'
import AntButton from './hover-click-button'
import TitleData from './web-data/title-data'

export default function App() {
  return (
    <main>
     <AntButton title={TitleData[0]} />
    </main>
  )
}

我尝试将索引 0 处的值从 TitleData 作为道具传递给

AntButton

，但我没有收到任何结果。

AntButton

应该生成一个带有标题的按钮。

这是我收到的错误：

Answer 1

要将数组作为 prop 传递给 React 中的组件，可以将数组括在大括号中。在您的情况下，您可以将数组从 TitleData 组件传递到 App 组件，如下所示：

import './App.css'
import AntButton from './hover-click-button'
import TitleData from './web-data/title-data'

export default function App() {
return (
<main>
<AntButton title={TitleData()[0]} />
</main>
)
}

在这里，我们调用 TitleData 函数并将返回数组的第一个元素作为 prop 传递给 AntButton 组件。

我希望这有帮助！

Answer 2

你也可以尝试这个更简单的方法：

export default function App() {
  const titleArray = TitleData(); // Just simply call the function to get the array
  return (
    <main>
      <AntButton title={titleArray[0]} />
    </main>
  );
}