Question

孩子

import React, {Component} from 'react'

class Card extends Component {

render() {

let props = this.props;

return(
        <div className="card-main">
            <img src={`http://image.tmdb.org/t/p/w342/${props.path}`} alt="Poster" />
            <div className="card-deatils">
                <h4 className="card-name">{props.name}</h4>
                <h4 className="id card-name">{props.id}</h4>
            </div>
        </div>
);
}
}

export default Card;

我希望用类＆＃34; id＆＃34;来存储id。问题是，从以前的组件中，金额卡在页面中至少为20，我理想的是将id传递回其父组件。我试过的大部分方法都给出了未定义的值。

家长

import React, {Component} from 'react'
import Card from './Card'

class CardArray extends Component {

render() {

    var props = this.props

    return (
        <div className="pop-movie-container">
        <div className="card">
                    {
                        props.popNames.map((val,index) => {
                            return(
                            <Card
                            key ={props.popId[index]}
                            id={props.popId[index]}
                            name={props.popNames[index]} 
                            path={props.popPath[index]}
                            />
                            );
                        })
                    }
        </div>
        <div className="load-more">
            <button className="btn btn-12" onClick={props.change}>LOAD MORE</button>
        </div>
        </div>  
    );

}

}

export default CardArray;

popNames是一个数组，最少包含20个名称，点击加载时会增加20个。

所以，理想情况下我想要的是将卡片的ID传递给CardArray。

output

因此，当有人点击卡片时，可以使用电影ID

从api中获取更多信息

Answer 1

父

import React, { Component } from "react";
import Card from "./Card";

class CardArray extends Component {
  fetchDetails = (id) => {
    // fetching logic goes here
  }
  render() {
    var props = this.props;
    return (
      <div className="pop-movie-container">
        <div className="card">
          {props.popNames.map((val, index) => {
            return (
              <Card
                key={props.popId[index]}
                id={props.popId[index]}
                name={props.popNames[index]}
                path={props.popPath[index]}
                handelClick={this.fetchDetails}
              />
            );
          })}
        </div>
        <div className="load-more">
          <button className="btn btn-12" onClick={props.change}>
            LOAD MORE
          </button>
        </div>
      </div>
    );
  }
}

export default CardArray;

子

import React, { Component } from "react";

class Card extends Component {
  render() {
    let props = this.props;

    return (
      <div className="card-main" onClick={() => this.props.handelClick(this.props.id)}>
        <img
          src={`http://image.tmdb.org/t/p/w342/${props.path}`}
          alt="Poster"
        />
        <div className="card-deatils">
          <h4 className="card-name">{props.name}</h4>
          <h4 className="id card-name">{props.id}</h4>
        </div>
      </div>
    );
  }
}

export default Card;

你可以将一个函数作为道具传递给孩子，孩子可以用id调用那个函数。如果您需要更多解释请告诉我。

也快速建议你可以直接传递

name={val}代替name={props.popNames[index]}

从<h4>中获取价值

1 个答案: