ReactJs如何在子组件中获取特定道具数据

Question

我从DownloadsHistory.jsx]中获取API数据，并在子组件中传递了props，如下面的代码：

<DownloadData
      downloadToday={d.today}// need that separatly
      downloadYesterday={d.yesterday}
      downloadLastWeek={d.last_week}
      downloadAllTime={d.all_time}
    />
如果我在DownloadData.jsx中进行控制台，则获取以下数据：

{downloadToday: "55628", downloadYesterday: "98569", downloadLastWeek: "720570", downloadAllTime: "143086901"}
如果我叫<DownloadHistory/>，我将获得所有道具数据。很好，但是如何从中获取单个数据？假设我只想在third.jsx

上使用{this.props.downloadToday}.

在下面添加更多详细信息代码：

DownloadHistory.jsx

import React, { Component } from "react";
import axios from "./axios";
import DownloadData from "./download-view";
import Third from "./third";

class DownloadsHistory extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    var slug = "contact-form-7";
    const url =
      "https://api.wordpress.org/stats/plugin/1.0/downloads.php?slug=" +
      slug +
      "&limit=10&historical_summary=1";

    axios.get(url).then((res) => {
      this.setState({ data: res.data });
    });
  }

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    var d = this.state.data;
    if (!d) return <div className="loading"></div>;

    return (
      <div>
        <DownloadData
          downloadToday={d.today}
          downloadYesterday={d.yesterday}
          downloadLastWeek={d.last_week}
          downloadAllTime={d.all_time}
        />
      </div>
    );
  }
}
export default DownloadsHistory;
download-view.jsx

import React, { Component, Fragment } from "react";

class DownloadData extends Component {
  render() {
    console.log(this.props);
    return (
      <Fragment>
        <table className="table" style={{ fontSize: 13, textAlign: "left" }}>
          <tbody>
            <tr>
              <td>Today</td>
              <td>{this.props.downloadToday}</td>
            </tr>
            <tr>
              <td>Yesterday</td>
              <td>{this.props.downloadYesterday}</td>
            </tr>
            <tr>
              <td>Last Week</td>
              <td>{this.props.downloadLastWeek}</td>
            </tr>
            <tr>
              <th>All Time</th>
              <th>{this.props.downloadAllTime}</th>
            </tr>
          </tbody>
        </table>
      </Fragment>
    );
  }
}
export default DownloadData;
widget.jsx

import React, { Fragment, Component } from "react";
import { faStar, faCheck } from "@fortawesome/free-solid-svg-icons";

import DownloadsHistory from "./DownloadsHistory";
import ActiveVersion from "./active-version";
import Downloads from "./download";

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

class Widget extends Component {
  render() {
    console.log(this.props);
    return (
      <Fragment>
        <div className="row mt-5">
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download Today</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faCheck} color="#28a745" />
                </div>
                <div className="pull-right number">
                  <DownloadsHistory /> {/* Need only Today Data here*/}
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download History</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <DownloadsHistory /> {/* okay here */}
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Active Install</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faCheck} color="#28a745" />
                </div>
                <div className="pull-right number">
                  {this.props.active_installs}+
                  <div style={{ fontSize: 13 }}>
                    but less than {this.props.probable_active_install}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Average Ratings</div>
              </div>
              <div className="widget-body clearfix">
                <div className="pull-left">
                  <FontAwesomeIcon icon={faStar} color="#28a745" />
                </div>
                <div className="pull-right number">{this.props.AvgRating}</div>

                <div style={{ fontSize: 13 }}>
                  based on {this.props.number_of_rating} reviews
                </div>
              </div>
            </div>
          </div>
          <div className="col-lg-3 col-md-3">
            <div className="widget text-center">
              <div className="widget-heading clearfix">
                <div className="pull-left">Download History</div>
              </div>
              <div className="widget-body clearfix pt-0">
                <DownloadsHistory />
              </div>
            </div>
          </div>
          <div className="col-lg-6 col-md-6">
            <div className=" text-center">
              <div className="clearfix">
                <div className="pull-left">Active version</div>
              </div>
              <div className="clearfix pt-0">
                <ActiveVersion />
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    );
  }
}
export default Widget;
    

我在DownloadsHistory.jsx中获得API数据，并在子组件中传递了道具，如下代码：]

Answer 1

根据您的描述，我假设DownloadData组件正在DownloadHistory组件内部呈现。如果是这种情况，则只需将Third组件与DownloadData组件一起放置，然后仅将downloadToday={d.today}传递到Third组件中即可。