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

我有一个关于足球冠军的评论列表，我试图分别显示每个足球冠军的评论。我试图在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);

import React，{Component}来自“React”；
从“/reference”导入{ChampsRef，timeRef}；
从“./actions/champs”导入{getsinglechamp}；
从“react redux”导入{connect}；//这是没有被使用。哦，我就是这样？
从“react router dom”导入{Redirect，Link}；
从“reactstrap”导入{Container，Row，Col}；
从“react Upvote”导入{Upvote}；
从“/Form”导入表单；
从“反应图标工具包”导入{Icon}；
从“/Specials”导入特价商品；
从“./config/dev”导入应用程序；
从“react icons kit/fa/chevronDown”导入{chevronDown}；
从“react icons kit/fa/chevronUp”导入{chevronUp}；
类OneChamp扩展组件{
状态={
姓名：“，
弱：[]，
img:“”，
认证：假，
当前用户：null，
电子邮件：“
};
componentDidMount（）{
app.auth（）.onAuthStateChanged（用户=>{
如果（用户）{
这是我的国家({
当前用户：用户，
电子邮件：user.email，
真的吗
});
}否则{
这是我的国家({
当前用户：null，
认证：假
});
}
});
}
组件willmount（）{
const{dispatch，match}=this.props；
调度（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）；
log（“，this.props.champ.stats”）；
const champ=this.props.champ.stats；
让content=null；
如果（装载）{
内容=加载…
；
}否则{
内容=(
{" "}
{this.props.champ.name}

{Object.keys（champ.map）（（项，i）=>(

{冠军[项目]}

))}



//我要通过身份证的地方
弱到



{这个.道具.冠军.弱者}


中间
{这个。道具。冠军。胜利}


{" "}
{这个.道具.冠军.弱点3}

{
中间
{这个。道具。冠军。胜利}


{认证(
) : (
    
{" "}
登录发布
)}
);
}
返回{content}；
}
}
常量mapStateToProps=状态=>{
console.log（“champs”，state.champs）；
console.log（state.loading）；
返回{
冠军：州冠军，
加载：state.loading
};
};
导出默认连接(
MapStateTops，
无效的
)（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);

import React，{Component}来自“React”；
从“axios”导入axios；
从“./config/dev”导入应用程序；
从“react router dom”导入{Link}；
从“/reference”导入{ChampsRef，CommentsRef，timeRef}；
从“react redux”导入{connect}；
从“./actions/champs”导入{getsinglechamp}；
类注释扩展组件{
状态={
评论：[]，
冠军编号：“，
加载：对，
电子邮件：“
};
组件willmount（）{
const champ_id=this.props.champ.id；
console.log（“id”，this.props.champ）；
orderByChild评论（“champ_id”）
.equalTo（`champ_id}`）
.on（“值”，捕捉=>{
常量任务=[]；
让评论=[]；
snap.forEach（子项=>{
comments.push（{…child.val（），key:child.key}）；
});
this.setState（{comments:comments，load:false}）；
});
}
render（）{
const{dispatch，loading}=this.props；
const{comments，ChampsLoading}=this.state；
const orderedchamps=注释；
让评论列表；
if（ChampsLoading）{
commentList=加载。。。；
}else if（comments.length）{
评论列表=(

{comments.map（comment=>(
{comment.text}
))}

);
}
返回(
流行商会
{commentList}

);
}
}
常量mapStateToProps=状态=>{
console.log（“champs”，state.champs）；
console.log（state.loading）；
返回{
冠军：州冠军，
加载：state.loading
};
};
导出默认连接(
MapStateTops，
无效的
)（评论）；

您的控制台中是否有任何错误？很难判断缩进是否到处都是，但看起来有未闭合/不匹配的JSX标记