如何使用道具将数据从父母传递给孩子

Question

我在 reactJs 中有父子组件，我想使用 props 将父数据传递给详细组件。

我尝试如下所示，但我无法显示数据，不断将我重定向到父组件

父/母页

render() {
    const cardKeys = Object.keys(cardData);
    return (
      <div className="scroll-list">
        {cardData.data.Table.map((results, index) => {
          return (
            <div class="col-sm-3">
              <div class="card ">
                <div class="card-body">
                  <div class="row">

                    <div class="col-md-9 col-sm-9">
                      <a href="mailto:{results.email_address}">{results.id}</a>
                    </div>
                  </div>
                  <div class="row">                   
                    <div class="col-md-9 col-sm-9">
                      <a href="mailto:{results.email_address}">
                        {results.first_name}
                      </a>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          );
        })}
      </div>
    );
  }
}

卡片详情/子组件

const Card = props => {
  const { id } = props.match.params;
  return (
    <div className="card-details">
      <h2>{cardData.data.Table[id].first_name}{cardData.data.Table[id].last_name}</h2>
      <h2>{cardData.data.Table[id].email_address}</h2>    
      <Link
        to={{
          pathname: "/cards",
          state: props.location.state
        }}
      >
        <button>Return to list</button>
      </Link>
    </div>
  );
};

主应用路由器组件 函数应用程序（）{ 返回 （ ); }

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

您需要像这样更新代码。 添加home的路由路径如

    <Route path="/" component={Cards} />

在你的子组件中

      var x = this.props.cardData;
      var id = 1001; //need to change/get from parent id value
      var index = 0; 
      for(var i = 0; i<x.data.Table.length; i++) {
         if(id === x.data.Table[i].id) { 
           index = i; 
         } 
      } 
      // const id = 0; 
      return ( <div className="card-details">
                 <h2> {cardData.data.Table[i].first_name} 
                 {cardData.data.Table[i].last_name} 
                 {cardData.data.Table[i].email_address} </h2>

你剩下的代码在这里

还有一件事是将 class="" 更改为 className="";

希望这能解决您的问题。