Question

我在reactJs中有父子组件，我想使用props将父数据传递给detail组件。我在这里有代码code in sandbox

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

父母/母校页面

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>
                  <Link
                    to={{ pathname: `/cards/${results.id}`, state: results }}
                    className={`card-wrapper restore-${results.id}`}
                  >
                    {results.first_name}
                  </Link>
                </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>
  );
};

主要App路由器组件函数App（）{ 返回（）; }

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

Answer 1

您需要像这样更新代码。添加首页之类的路线

    <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 =“”;

希望这可以解决您的问题。

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

1 个答案: