将不同的值从数组传递到组件

Question

我的组件中有一个状态值不同的数组。

我想将数组的不同部分动态呈现到同一组件，但在我的应用程序的不同页面上。

i.e将属性向下传递到Component，该Component在一个页面上呈现数组的第一个标题，然后在另一页面上呈现第二个标题。

有人可以帮忙吗？

import React from 'react';
import ChartItem from './chart-item.component.js'
import Popup from './modal/index.js'

//styles
import './chart-slides.styles.css'

class Chart extends React.Component {
  constructor() {
    super();

    this.state = {
      sections: [
        {
          title: 'How do you compare to the competition?',
          id: 'chart1',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        },
        {
          title: 'Main drivers of positive sentiment sentiment are brand, service, and app exeprience. While bugs and security features are big drivers of negative sentiment',
          id: 'chart2',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        },
        {
          title: 'Scroll through the feedback to see the pain points for customers',
          id: 'chart3',
          iframeUrl: 'https://app.chattermill.io/c/f4a52535-b2b9-4d71-9ac7-e198c9452e3f?compact=true'
        }
      ]
    };
  }


  render() {
    return (
      <div>
        {this.state.sections.map(({ id, title, iframeUrl }) => (
          <ChartItem key={id} title={title} url={iframeUrl} />
        ))}
        <Popup/>
      </div>
    );
  }
}

export default Chart;

如何仅在下面的此组件中渲染数组的第一部分？下面的组件将在应用程序的多个页面中显示。

import React from 'react';
import Popup from '../modal/index.js'
import { Heading } from 'rebass'
import './chart-slides.styles.css'
import Iframe from 'react-iframe'

const ChartItem = ({ title, iframeUrl, id }) => (
  <div>
    <a className="demo-btn" id="demo-btn-chart1" href="https://app.hubspot.com/meetings/jack123/presentation" target="_blank" rel="noopener noreferrer"> Book Demo</a>
      <Heading fontSize="2.8vh" textColor="secondary" className="mobile-chart-title" as='h1'>
        {title}
      </Heading>
      <Iframe
        url={iframeUrl}
        className="iframe-container"
      />
  </div>
);

export default ChartItem