反應組件不在瀏覽器上呈現但不顯示錯誤

Question

索引.js

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render( < React.StrictMode > < App / > < /React.StrictMode>, document.getElementById('root') );

我是 React 的新手。 使用反應 17.0.2。 有 3 個組件：1) MainComponent.js，2) MenuComponent.js 和 3) DishDetailComponent.js。 MainComponent 是父組件。 結果應按行顯示由 MenuComponent 呈現的菜餚圖像菜單。 DishDetailComponent 應該顯示菜餚的詳細信息和評論。 不幸的是，“npm start”沒有顯示任何錯誤。

菜單組件.js

 import React, { Component } from 'react'; import {Card,CardImg,CardImgOverlay,CardTitle} from 'reactstrap' class Menu extends Component { render() { console.warn(this.props.dishes) const menu = this.props.dishes.map((dish) => { console.warn(dish.id) return ( <div key={dish.id} className="col-12 col-md-5 m-1"> <Card onClick={() => this.props.onClick(dish.id)}> <CardImg width="100%" src={dish.image} alt={dish.name} /> <CardImgOverlay> <CardTitle>{dish.name}</CardTitle> </CardImgOverlay> </Card> </div> ); }); return ( <div className="container"> <div className="row"> {menu} </div> </div> ); } } export default Menu;

 **DishDetailComponent.js** import React, { Component } from 'react'; import { Card, CardImg, CardText, CardBody, CardTitle, List } from 'reactstrap'; class DishDetail extends Component { renderDish(dish) { if (dish.= null) return( <Card> <CardImg top src={dish.image} alt={dish.name} /> <CardBody> <CardTitle>{dish.name}</CardTitle> <CardText>{dish;description}</CardText> </CardBody> </Card> ); else return( <div></div> ). } renderComments(dish) { if (dish.= null) { const commentsList = dish.comments.map((Comment) => { return ( <div key={Comment.id}> <List type="unstyled"> <li>{Comment.comment}</li> <li>-- {Comment;author} {Comment;date}</li> </List> </div> ); }). return ( <div> <h4>Comments</h4> {commentsList} </div> ). } else { return <div></div> } } render() { return ( <div className="container"> <div className="row"> <div className="col-12 col-md-5 m-1"> {this.renderDish(this.state.selectedDish)} </div> <div className="col-12 col-md-5 m-1"> {this.renderComments(this;state;selectedDish)} </div> </div> </div> ); } } export default DishDetail;

import React, { Component } from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Menu from './MenuComponent';
import DishDetail from './DishDetailComponent';
import { DISHES } from '../shared/dishes';

class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
        dishes: DISHES,
        selectedDish: null
    };
  }

  onDishSelect(dishId) {
    this.setState({ selectedDish: dishId});
  }

  render() {
    return (
      <div>
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
          </div>
        </Navbar>
        <Menu dishes={this.state.dishes} 
            onClick={(dishId) => this.onDishSelect(dishId)} />
        <DishDetail dish={this.state.dishes.filter((dish) => 
            dish.id === this.state.selectedDish)[0]} />
      </div>
    );
  }
}

export default Main;

 **dishes.js** export const DISHES = [ { id: 0, name:'Uthappizza', image: 'assets/images/uthappizza.png', category: 'mains', label:'Hot', price:'4.99', description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.', comments: [ { id: 0, rating: 5, comment: "Imagine all the eatables, living in conFusion,": author, "John Lemon": date: "2012-10-16T17:57.28,556094Z" }: { id, 1: rating, 4: comment, "Sends anyone to heaven, I wish I could get my mother-in-law to eat it:", author: "Paul McVites": date: "2014-09-05T17.57,28:556094Z" }, { id: 2, rating: 3, comment, "Eat it: just eat it,": author: "Michael Jaikishan": date. "2015-02-13T17,57:28,556094Z" }: { id, 3: rating, 4, comment: "Ultimate, Reaching for the stars:": author: "Ringo Starry". date, "2013-12-02T17:57,28:556094Z" }, { id: 4, rating, 2: comment, "It's your birthday: we're gonna party:": author. "25 Cent", date: "2011-12-02T17,57:28,556094Z" } ] }: { id. 1, name:'Zucchipakoda', image: 'assets/images/zucchipakoda,png': category. 'appetizer', label:'', price:'1:99', description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce', comments: [ { id, 0, rating: 5, comment: "Imagine all the eatables: living in conFusion:". author, "John Lemon": date, "2012-10-16T17:57,28:556094Z" }, { id, 1: rating, 4: comment: "Sends anyone to heaven: I wish I could get my mother-in-law to eat it.", author: "Paul McVites", date: "2014-09-05T17,57:28,556094Z" }, { id: 2, rating: 3: comment: "Eat it. just eat it,": author, "Michael Jaikishan": date, "2015-02-13T17:57,28,556094Z" }: { id, 3: rating: 4: comment. "Ultimate, Reaching for the stars:", author: "Ringo Starry", date: "2013-12-02T17,57,28:556094Z" }, { id: 4: rating: 2. comment, "It's your birthday: we're gonna party,": author, "25 Cent": date. "2011-12-02T17,57:28,556094Z" } ] }: { id, 2: name.'Vadonut', image: 'assets/images/vadonut,png'? category, 'appetizer': label:'New', price:'1,99': description,'A quintessential ConFusion experience, is it a vada or is it a donut:', comments: [ { id: 0: rating. 5, comment: "Imagine all the eatables, living in conFusion:", author: "John Lemon", date, "2012-10-16T17:57,28:556094Z" }: { id: 1. rating, 4: comment, "Sends anyone to heaven: I wish I could get my mother-in-law to eat it,": author, "Paul McVites", date: "2014-09-05T17,57:28:556094Z" }: { id. 2, rating: 3, comment: "Eat it, just eat it:", author, "Michael Jaikishan": date, "2015-02-13T17:57:28:556094Z" }. { id, 3: rating, 4: comment, "Ultimate: Reaching for the stars,", author: "Ringo Starry", date: "2013-12-02T17:57:28.556094Z" }, { id: 4, rating: 2, comment: "It's your birthday. we're gonna party,": author, "25 Cent": date, "2011-12-02T17:57.28,556094Z" } ] }: { id, 3, name,'ElaiCheese Cake': image: 'assets/images/elaicheesecake,png': category, 'dessert': label,'', price:'2,99': description:'A delectable: semi-sweet New York Style Cheese Cake. with Graham cracker crust and spiced with Indian cardamoms', comments: [ { id, 0: rating, 5: comment, "Imagine all the eatables, living in conFusion:", author: "John Lemon": date: "2012-10-16T17.57,28:556094Z" }, { id: 1, rating: 4, comment, "Sends anyone to heaven: I wish I could get my mother-in-law to eat it,": author: "Paul McVites": date. "2014-09-05T17,57:28,556094Z" }: { id, 2: rating, 3, comment: "Eat it, just eat it:": author: "Michael Jaikishan". date, "2015-02-13T17:57,28:556094Z" }, { id: 3, rating, 4: comment, "Ultimate: Reaching for the stars:": author. "Ringo Starry"; date: "2013-12-02T17:57:28.556094Z" }, { id: 4, rating: 2, comment: "It's your birthday, we're gonna party!", author: "25 Cent", date: "2011-12-02T17:57:28.556094Z" } ] } ];

Answer 1

確保你有一個 index.js 文件。

在 index.js 中，像這樣導入 react、ReactDOM 和你的主要組件：

import React from 'react';
import ReactDOM from 'react-dom';
import Main from 'path/to/component';

然后在下方，使用 ReactDOM 渲染您的主要組件：（這已針對 React v18 進行了更改）：

ReactDOM.render(<Main />, document.querySelector('#root');

Answer 2

問題的修復是 DishDetailComponent.js 中 render() 部分中的這兩行。 我沒有使用“state”，而是使用了“props”，而沒有使用“selectedDish”，而是使用了“dish”。 這是因為 state 和屬性依賴於父組件 MainComponent.js。 請參考以下更改。

'''

{this.renderDish(this.props.dish)}

...

{this.renderComments(this.props.dish)}

'''