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

【问题标题】：ReactJs how to get specific props data in child componentReactJs如何在子组件中获取特定的道具数据
【发布时间】：2020-06-05 21:03:03
【问题描述】：

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

<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}.

在下面添加更多细节代码：

下载History.jsx

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

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

  componentDidMount() {
    var slug = "contact-form";
    const url =
      "https://api.xyz.com/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;

** widget.jsx 有一些来自另一个父母的道具。

【问题讨论】：

React 组件的行为就像一棵树，你只能向下传递道具，不能横向传递。除非 third.jsx 用作 DownloadsHistory.jsx 的子项，否则您将需要使用像 Redux 这样的存储来将数据从组件传递到组件。
不太明白这个问题。能否展示更多代码以及组件树的外观？

标签： javascript reactjs react-props react-component

【解决方案1】：

形成您的描述我假设DownloadData 组件正在DownloadHistory 组件内呈现。如果是这种情况，那么您可以简单地将Third 组件与DownloadData 组件一起放置，并将downloadToday={d.today} 仅传递给Third 组件。

像这样：

<DownloadData
          downloadToday={d.today}// need that separatly
          downloadYesterday={d.yesterday}
          downloadLastWeek={d.last_week}
          downloadAllTime={d.all_time}
        />

<Third downloadToday={d.today} />

希望这会有所帮助。

【讨论】：

【解决方案2】：

您需要从两者的父级调用 Web 服务并将 props 传递给组件。

【讨论】：