從子組件和父組件中的數組映射數據

Question

我將數據存儲在數組的data.js文件中。 我在Child組件（僅數組中的第一個對象）中顯示該數據。 我想通過父組件中的相同數組進行映射（通過渲染<ChildComponent> ）。 我怎樣才能做到這一點？

data.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 info@mail.eu',
    },
  ],
};

子組件

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個相同的組件。

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

您根本不應該使用狀態。

Answer 2

您可以簡單地從map函數本身傳遞數據，例如：

accordionItems.map(accordionItem => (
      <AccordionItem
        key={accordionItem.id}
        open={[`isOpen-${accordionItems.id}`]}
        data={accordionItem}
      />
));

在孩子中：

class AccordionItem extends Component {
  constructor(props) {
    super(props);
    this.state = {
      question: props.data, //data from map function in parent
    };
  }

Answer 3

也許您應該閱讀更多有關React中的組件和傳遞道具的信息。

您可以做的是代替將Data導入AccordionItem組件中，而通過props將其傳遞給AccordionItem 。

看起來像這樣：

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}
          item={accordionItem}
          open={[`isOpen-${accordionItems.id}`]}
        />
    ))
  }

現在，該項目應該可以通過子組件中的props進行訪問：

 class AccordionItem extends Component {

   render(){
     const { question } = this.props
     return (
       <div >
         <div>
           <p>{question.title}</p>
           <button>toggle</button>
         </div>
         <p>{question.answer}</p>
         <hr />
       </div>
     );
   }