如何将状态数组转移到道具

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>
);

Answer 1

您需要映射您的categoryName数组

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

Answer 2

假设类别是组件状态中的对象数组，请map状态类别，并在数组的每次迭代中返回Category组件。

 function Category({ categoryName }) { return (<button>{categoryName}</button>); } class App extends React.Component { constructor(props) { super(props); this.state = { categories: [ { categoryName: 'Bob', type: 'string' }, { categoryName: 'Trevor', type: 'number' }] }; } render() { return ( <div> {this.state.categories.map(category => { return <Category categoryName={category.categoryName} /> })} </div> ) } } ReactDOM.render( <App />, document.getElementById('container') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="container"></div>