我正在尝试渲染轮播。我无法传递状态数据 SliderArr 以使其在 Slider.tsx 中渲染

如何将数据从一个组件传递到另一个组件？ 请提供意见 :)

Main.tsx

//some codes above
public render(): React.ReactElement<IAProps> {
         return (
        <div className={styles.container}>
            <Slider>
                {this.state.data.map(item=>
                <div>
                  <Data 
                  key={item.id}
                  id={item.id}
                  title={item.title}
                  />   
               </div>
                )}
              </Slider>  
   </div>  

    );
  }

Slider.tsx

import *  as React from 'react';
import {useState} from 'react';
import './slider.scss';
import Data from './Data';
import { IconButton } from 'office-ui-fabric-react/lib/Button';
function Slider(props){

   var SliderArr=[];
   SliderArr.push(Data);
   debugger;
   console.log(SliderArr);
//codes continues....

Data.tsx

import *  as React from 'react';

function Data(props){
        return(
            <div>
            <h1>{props.id}</h1>
            <h2>{props.title}</h2>
            </div>

        )

}

export default Data;

2020-02-26 1604 我找到了一个修改 Slider.tsx 的解决方案

function Slider(props){

   var SliderArr=[];
   let temp=props.data;

   temp.map((i,index)=>
   {SliderArr.push(
   <Data id={i.id} 
   title={i.title}
   photo={i.photo}
   summary={i.summary}  
   />);
    }
   )