当我按下按钮时如何将数据从一个组件发送到另一个组件。 React.js

Question

我有一个表格，我在其中呈现来自 pokemon api 的数据，在表格​​中我有一个按钮，当您按下按钮时，您会从箭头获取数据，所以我想将该数据从我的组件表发送到另一个组件card 并在该卡中仅呈现您从表中选择的数据。 但我不知道如何将数据发送到我的组件卡，而不是在我的表中渲染我的卡五次。 现在当我按下按钮时我得到了数据，我只需要发送给他。

表格组件上的行

export const Lista = (props) => {
    
    const [, setPokeSelec] = useState({
    })
    
    const selectArrow = ( poke ) => {

        setPokeSelec( poke );
        console.log(poke);
    }
    
    return (

        <>
            <TableRow key={ props.info.id }>
                <TableCell component="th" scope="row">
                    { props.info.id }
                </TableCell>
                <TableCell align="right">{ props.info.name }</TableCell>
                <TableCell align="right">{ props.info.abilities[0].ability.name}</TableCell>
                <TableCell align="right">
                    <img src={ props.info.sprites.front_default } alt={ props.info.name } style={{ height: 60 }} />
                </TableCell>
                <TableCell align="right">
                    <Button 
                        variant="contained" 
                        color="primary" 
                        size="small" 
                        onClick={ () => selectArrow( props.info ) }
                    >
                        Seleccionar
                    </Button>
                    </TableCell>
            </TableRow>
        </>
    )
}

卡片组件

export const Informacion = () => {

    const classes = useStyles();

    return (
        <div className={ classes.margen } >
            <Box display="flex" justifyContent="center" alignItems="center">
                <Card className={classes.root}>
                    <CardMedia
                        className={classes.cover}
                        image={pika}
                        title="Live from space album cover"
                    />
                    <div className={classes.details}>
                        <CardContent className={classes.content}>

                        <Typography component="h5" variant="h5">
                            Pikachu
                        </Typography>

                        <Divider/>

                        <Typography variant="subtitle1" color="textPrimary">
                            Tipo:
                        </Typography>

                        </CardContent>
                    </div>
                </Card>
            </Box>
        </div>
    )
}

PokemonApi 组件在这里我调用 API，渲染表并将数据发送到我的组件表

export const PokemonApi = () => {

const classes = useStyles();
const [poke, setPoke] = useState([]);


const data = () => {        
    
    axios.get(`https://pokeapi.co/api/v2/pokemon?limit=100`).then(( response ) => {

        for(let i = 0; i < response.data.results.length; i++  ) {
            axios.get(response.data.results[i].url)
            .then( result => {
                setPoke(prevArray => [...prevArray, result.data])
                // console.log(result.data);
            })
        }
    })
    .catch( err => {
        console.log(err);
    })

}

useEffect(() => {

    data()

}, []);

return (

    <>


        <TableContainer className={ classes.margin } component={Paper}>
            <Table className={ classes.table } size="small" aria-label="a dense table">
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell align="right">Name&nbsp;</TableCell>
                        <TableCell align="right">Type&nbsp;</TableCell>
                        <TableCell align="right">Img&nbsp;</TableCell>
                        <TableCell align="right">Actions&nbsp;</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    { poke.map((infos, name) => <Lista key={name} info={infos}/>) }
                </TableBody>
            </Table>
        </TableContainer>
    </>
)

}

这是我渲染卡片和 PokemonApi 的页面

export const Pokes = () => {

    return (
        <Container maxWidth="md">
            <PokemonApi />
            <Informacion />
        </Container>
    )
}

谢谢你的时间！！

Answer 1

以下是将数据从组件 A 传递到组件 B 的常用方法：

1. 将组件 B 作为组件 A 的子组件（请参阅此链接）
2. 将组件 A 作为组件 B 的子组件，并在组件 A 中触发回调属性（请参阅此链接）
3. 使用上下文 API

希望这个回答对你有帮助