如何将道具从父组件传递到子组件

Question

我有一个关于足球冠军的评论列表，并试图分别显示每个足球冠军的评论。我正在尝试在Firebase中按ID排序，但不知道如何将ID从Champion组件传递到显示所有评论的组件。由于某种原因，它只是给我未定义的。任何帮助是极大的赞赏！

champ.js

import React, { Component } from "react";
import { ChampsRef, timeRef } from "./reference";
import { getsinglechamp } from "../actions/champs";
import { connect } from "react-redux"; // this is not being used.  oh isee so like this?
import { Redirect, Link } from "react-router-dom";
import { Container, Row, Col } from "reactstrap";
import { Upvote } from "react-upvote";
import Form from "./Form";

import { Icon } from "react-icons-kit";
import Specials from "./specials";
import app from "../config/dev";
import { chevronDown } from "react-icons-kit/fa/chevronDown";
import { chevronUp } from "react-icons-kit/fa/chevronUp";
class OneChamp extends Component {
  state = {
    name: "",
    weak: [],
    img: "",
    authenticated: false,
    currentUser: null,

    email: ""
  };

  componentDidMount() {
    app.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({
          currentUser: user,
          email: user.email,
          authenticated: true
        });
      } else {
        this.setState({
          currentUser: null,
          authenticated: false
        });
      }
    });
  }

  componentWillMount() {
    const { dispatch, match } = this.props;
    dispatch(getsinglechamp(match.params.id));
    console.log(this.props);
  }

  render() {
    console.log(this.props.champ);
    const { dispatch, loading } = this.props;

    const authenticated = this.state.authenticated;
    console.log("change", this.props);
    console.log("c", this.props.champ.img);
    console.log("", this.props.champ.stats);
    const champ = this.props.champ.stats;
    let content = null;
    if (loading) {
      content = <p>Loading...</p>;
    } else {
      content = (
        <div id="f">
          <div className="ChampionHeader_row_ArTlM">
            <div
              style={{
                paddingRight: "0.75rem",
                paddingLeft: "0.75rem",
                flexGrow: 1
              }}
            >
              <div style={{ display: "flex", marginBottom: "1.5rem" }}>
                <div style={{ flexShrink: 0, marginRight: "1rem" }}>
                  <div className="IconChampion_component_2qg6y IconChampion_lg_2QLBf">
                    <img
                      className="v-lazy-image v-lazy-image-loaded IconChampion_img_3U2qE"
                      src={this.props.champ.img}
                      height="80px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="timeline-panel">
            <div className="timeline-heading">
              {" "}
              <h4>{this.props.champ.name}</h4>
            </div>

            <ul>
              {Object.keys(champ).map((item, i) => (
                <div className="card">
                  <li className="travelcompany-input" key={i}>
                    <div> {champ[item]}</div>
                  </li>
                </div>
              ))}
            </ul>
            <br />

            <div className="w3-container">
         // place i want to pass id <Comments id={this.props.champ.id} />
              <h2>Weak To</h2> <br />
              <ul className="w3-ul w3-card-4">
                <li className="w3-bar">
                  <img
                    src={this.props.champ.img2}
                    className="w3-bar-item w3-circle w3-hide-small"
                    style={{ width: 145 }}
                  />
                  <div className="w3-bar-item">
                    <span className="w3-large">{this.props.champ.weak}</span>
                    <br />
                    <span id="item"> Mid </span>
                    <div className="col-sm-5">
                      <span className="label label-primary">
                        {this.props.champ.win}
                      </span>
                    </div>
                  </div>
                </li>

                <li className="w3-bar">
                  <img
                    src={this.props.champ.img3}
                    className="w3-bar-item w3-circle w3-hide-small"
                    style={{ width: 145 }}
                  />
                  <div className="w3-bar-item">
                    <Link to={`/Matchup/${this.props.champ.id}`}>
                      {" "}
                      <span className="w3-large">{this.props.champ.weak3}</span>
                      <br />{" "}
                    </Link>
                    <span id="item"> Mid </span>

                    <span className="label label-primary">
                      {this.props.champ.win}
                    </span>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div />
          {authenticated ? (
            <div className="nav-item">
              <Form id={this.props.champ.id} />
            </div>
          ) : (
            <div className="nav-item">
              &#160;&#160;&#160;&#160;
              <Link to="/login" className="nav-link2">
                {" "}
                Login to post
              </Link>
            </div>
          )}
        </div>
      );
    }

    return <div>{content}</div>;
  }
}

const mapStateToProps = state => {
  console.log("champs", state.champs);
  console.log(state.loading);
  return {
    champ: state.champs.champ,
    loading: state.loading
  };
};

export default connect(
  mapStateToProps,
  null
)(OneChamp);

comments.js

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

import app from "../config/dev";
import { Link } from "react-router-dom";
import { ChampsRef, CommentsRef, timeRef } from "./reference";
import { connect } from "react-redux";
import { getsinglechamp } from "../actions/champs";
class Comments extends Component {
  state = {
    comments: [],

    champ_id: "",
    loading: true,
    email: ""
  };

  componentWillMount() {
    const champ_id = this.props.champ.id;

    console.log("id", this.props.champ);
    CommentsRef.orderByChild("champ_id")
      .equalTo(`${champ_id}`)
      .on("value", snap => {
        const tasks = [];
        let comments = [];
        snap.forEach(child => {
          comments.push({ ...child.val(), key: child.key });
        });
        this.setState({ comments: comments, Loading: false });
      });
  }

  render() {
    const { dispatch, loading } = this.props;
    const { comments, ChampsLoading } = this.state;
    const orderedchamps = comments;

    let commentList;

    if (ChampsLoading) {
      commentList = <div className="TaskList-empty">Loading...</div>;
    } else if (comments.length) {
      commentList = (
        <ul className="TaskList">
          {comments.map(comment => (
            <div>{comment.text}</div>
          ))}
        </ul>
      );
    }
    return (
      <div>
        <h1> Popular Cham</h1>

        <p> {commentList} </p>
      </div>
    );
  }
}

const mapStateToProps = state => {
  console.log("champs", state.champs);
  console.log(state.loading);
  return {
    champ: state.champs.champ,
    loading: state.loading
  };
};

export default connect(
  mapStateToProps,
  null
)(Comments);