javascript - 从子组件和父组件中的数组映射数据

Question

我将数据存储在数组中的 data.js 文件中。我在子组件中显示该数据（仅数组中的第一个对象）。我想通过父组件中的相同数组进行映射（通过渲染<ChildComponent>）。我怎样才能做到这一点？

数据.js

export default {
  accordionItems: [
    {
      id: 1,
      title: 'Why is my car not green?',
      answer: 'We ran out of green color',
    },
    {
      id: 2,
      title: 'Where have all the drivers gone?',
      answer: 'It\'s lunch time',
    },
    {
      id: 3,
      title: 'Do you have a book of complains',
      answer: 'You can write at [e-mail]',
    },
  ],
};

子组件

import Data from './data';

class AccordionItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: Data.accordionItems[0], //if I remove [0], no data is rendered
    };
  }

 return (
    <div >
      <div>
        <p>{question.title}</p>
        <button>toggle</button>
      </div>
      <p>{question.answer}</p>
      <hr />
    </div>
 );

父组件

import AccordionItem from './AccordionItem';
import Data from './data';


class Accordion extends Component {
  constructor(props) {
    super(props);
    this.state = {
      accordionItems: Data.accordionItems,
    };
  }
render() {
    const { accordionItems } = this.state;
    return accordionItems.map(accordionItem => (
      <AccordionItem key={accordionItem.id} />

我想从父组件中的“数据”数组中获取所有 3 个对象，现在我得到 3 个相同的组件，只有第一个对象。

标签： javascriptarraysreactjs

Answer 1

将项目作为道具传递：

 <AccordionItem question={accordionItem} ... />

您可以在 render() 方法中访问它：

render() {
 const { question } = this.props;

 return (
   <div >
     <div>
       <p>{question.title}</p>
       <button>toggle</button>
     </div>
     <p>{question.answer}</p>
   </div>
 );
}

您根本不应该使用该状态（还）。