javascript - 如何将状态数组传输到道具

Question

所以我有 2 个 React 文件，一个 App.js 和一个 category.js。当我将数组传输到 category.js 时，它会显示一大块文本，而不是将其拆分为不同的数组按钮。我尝试搜索，但我不明白该怎么做。有人可以解释一下吗？

这是类应用程序

class App extends React.Component {
Object.keys(data.categories).forEach((category,index) => {
    arr.push(data.categories[index].name);
})

render() {
return (
<div>
    <Categories 
      categoryName = { this.state.categoryName }
    />
</div>

这是使用道具的类别

const Categories = props => (
<div>
    <br /> 
    { props.categoryName && <button> { props.categoryName } </button>}
</div>
);

标签： javascriptreactjsstatereact-props

Answer 1

你需要映射你的categoryName数组

const Categories = props => (
   <div>
      <br /> 
      { props.categoryName &&
        props.categoryName.map(name => <button>{name}</button>)}
   </div>
   );