Question

我正在尝试渲染旋转木马。我无法传递状态数据 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}  
   />);
    }
   )

Answer 1

您需要按以下方式修改代码

Main.tsx

<Slider data={this.state.data}>

</Slider>

Slider.tsx

function Slider(props){

    // You will get data as below
    props.data;
    // Code continues
}

无法通过道具将数据传递到组件

1 个答案: