Question

单击该项目时，我无法将所需的属性从父级发送给子级。由于某种原因，它被打印在啤酒厂的主页上；但是不在DetailPage上。似乎DetailPage无法读取道具，因为我收到“无法读取未定义的属性'名称'”。

Brewery.js

  render() {
    const { breweries } = this.state;
    return(
      <div>
      <div className="main-container">
        <div className="banner">
          <div className="banner-content">
            <h1>Brewery</h1>
            <p>Find the best brewery in town</p>
          </div>
        </div>
        <div className="container">
          <div className="brewery-sort">
            <ButtonToolbar>
              <DropdownButton
              bsStyle="default"
              title="Sort"
              noCaret
              id="dropdown-no-caret"
              >
                <MenuItem onClick={() => this.sortAlpha()}>Alphabetically (A-Z)</MenuItem>
                <MenuItem onClick={() => this.sortRevAlpha()}>Alphabetically (Z-A)</MenuItem>
              </DropdownButton>
            </ButtonToolbar>
          </div>
          <div className="row">
            {breweries.slice(0, 10).map((brewery, i) =>
              <div className="col-xs-12 col-sm-4" key={i}>
                <Link to={`/brewery/${ brewery.id }`}>
                  <div className="card">
                    <div className="card-description">
                      <h2>{brewery.brewery_type}</h2>
                      <p>{brewery.city}, {brewery.state}</p>
                    </div>
                    <div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/>  {brewery.name}</div>
                  </div>
                  <DetailPage brewery={brewery} />
                </Link>
              </div>
            )}
          </div>
        </div>
      </div>

      </div>
    )
  }

DetailPage.js

  render() {
      const { id, state } = this.state.brewery;
      const breweries = this.state.breweries.filter(brewery => brewery.id !== id && brewery.state === state);
      return (
        <div className="background">
          <div className="details">
            <p>Name: {this.props.brewery.name}</p>
            <p className= "category">Category: {this.props.brewery.brewery_type}</p>
            <p>Address: {this.props.brewery.street}, {this.props.brewery.city}, {this.props.brewery.state}, {this.props.brewery.postal_code}, {this.props.brewery.country}</p>
            <p>Phone Number: {this.props.brewery.phone}</p>
            <p>Website: <a href={this.props.brewery.website_url} target="_blank" rel="noopener noreferrer">{this.props.brewery.website_url}</a></p>
          </div>
          <div className="recommendations">Recommendations</div>
          <div className="container">
            <div className="row">
              {breweries.slice(0,3).map(brewery => (
                <div className="col-xs-12 col-sm-4" key={brewery.id}>
                  <Link to={`/brewery/${ brewery.id }`} onClick={ this.reloadPage.bind(this)}>
                    <div className="card">
                      <div className="card-description">
                        <h2>{brewery.brewery_type}</h2>
                        <p>{brewery.city}, {brewery.state}</p>
                      </div>
                      <div className="card-name"><img src="https://img.icons8.com/color/20/000000/beer.png" alt="beer"/> {brewery.name}</div>
                    </div>
                  </Link>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    }

Answer 1

“详细信息”页面中存在一些错误，您正在将prop传递给子组件，但是在代码示例中引用的是内部状态。这是一个基本示例，基本上可以重新创建您要尝试的操作。

请注意我们如何使用this.props而不是this.state。请记住，子组件依赖于传递到组件中的状态。

class Brewery extends React.Component {
  // ... all your other methods
  render() {
    return (
      <div>{this.props.data.name}</div>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      breweries: [
        {
          id: 1,
          name: 'Guniness',
        },
        {
          id: 2,
          name: 'Brewdog',
        }
      ]
    };
  }
  
  render() {
    return (
      <div>
        {this.state.breweries.map((brewery) => (
          <Brewery key={brewery.id} data={brewery} />
        ))}
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

您需要在父级中将brewery设置为state，然后通过在父渲染中：

    <DetailPage brewery={this.state.brewery} />

到“详细信息”组件。哪里有

     this.props.brewery

无法将属性从父级发送到子级

2 个答案: