在 ReactJS 中调用功能组件相关的问题

Question

在运行反应网页时 h1 first 正在打印，但 h1 second 没有被打印
此外，renderDishDetail 和 renderComments 没有被调用。
我是 ReactJS 的新手，正在学习函数式组件。我将我的类组件转换为功能组件，从那时起就出现了这个问题。
这些是显示的一些错误，我无法理解为什么没有使用变量。

Line 21:6: 'comments' is assigned a value but never used no-unused-vars
Line 44:8: 'dish' is assigned a value but never used no-unused-vars

import React, { Component } from 'react';
import { Card , CardImg , CardTitle , CardBody , CardText } from 'reactstrap';

function renderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function renderComments(dish){
    console.log("render comments called")
    var comments;
    if(dish==null){
            console.log("DishDetail if");   
            comments = null;
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
            comments = dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                );
            })
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")

    const dishDetail = (dish) => {
        return(
            <div className="row">
                <h1>h1 second</h1>
                <renderDishDetail dish={dish} />
                <renderComments dish={dish} />
            </div>
        );
    }

    return(
            <div className="container">

                <h1>h1 first</h1>
                {dishDetail}
            </div>          
        );
}

export default DishDetail;

Answer 1

试试这个，它应该可以调用。

import React, { Component } from 'react';
import { Card , CardImg , CardTitle , CardBody , CardText } from 'reactstrap';

function RenderDishDetail(dish){
    console.log("render DishDetail called")
    return(
        <div className="col-12 col-md-5 m-1">
            <Card>
                <CardImg width="100%" src={dish.image} alt={dish.name} />
                <CardBody>
                    <CardTitle>{dish.name}</CardTitle>
                    <CardText>{dish.description}</CardText>
                </CardBody>
            </Card>  
        </div>
    );
}

function RenderComments(dish){
    console.log("render comments called")
    if(dish){
        console.log("DishDetail if");
            return(
                <div></div>
            )
        }
        else{
            console.log("DishDetail");  
        return <div>
            {dish.comments.map((unit) =>{
                return(
                    <div>
                    <p>{unit.comment}</p>
                    <p>-- {unit.author} , {unit.date[0]}{unit.date[1]}{unit.date[2]}{unit.date[3]}{unit.date[4]}{unit.date[5]}{unit.date[6]}{unit.date[7]}{unit.date[8]}{unit.date[9]}</p>
                    </div>
                )
            })}
            </div>
        }
}


const DishDetail = (props) => {
    const dish = props.selectdish;
    console.log("dish detail main called")
    return(
            <div className="container">
            <h1>h1 first < /h1>
                <div className="row">
                <h1>h1 second</h1>
                <RenderDishDetail dish={dish} />
                <RenderComments dish={dish} />
            </div>          
        );
}

export default DishDetail;

Line 21:6: 'comments' is assigned a value but never used no-unused-vars Line 44:8: 'dish' is assigned a value but never used no-unused-vars 这是您遇到的 lint 错误，您已经定义了您在 RenderComments 中定义的注释变量，但没有在函数中的任何地方使用它（我最好的猜测是您打算返回它，一旦您这样做了错误应该消失了。）

react 中的所有组件都以大写字母开头，无论是函数组件还是类组件（如您在 reactstarp 库中看到的，即 Card、CardImg 等）

Answer 2

dishDetail 是一个你没有调用过的函数。在带有参数dish 的渲染后添加括号，它应该可以工作。

像这样

{dishDetail(dish)}