一个 React 组件正在渲染但没有显示在网站上

Question

即使正在呈现反应组件，它也不会显示在网页上。

我附上了下面组件的代码和屏幕截图。

这是“App.jsx”文件中的代码。

    function createCard(prop){
    return (<Card key={prop.id} name={prop.name} emoji={prop.emoji} desc={prop.meaning} 
    />);
    }

    function App(){
    return(
    <div>
    <h1>
    <span>emojipedia</span>
    </h1>
    {emojipedia.map(createCard)}
    </div>
    );  
    }

这是“Card.jsx”文件中的代码。

    <div>
    <dl className="dictionary">
    <div className="term">
    <dt>
    <Name name="props.name" />
    <Emoji emoji="props.emoji"/>
    </dt>
    <Description desc="props.desc" />
    </div>
    </dl>
    </div>

在上面的代码中， <Description desc="props.desc />正在呈现但未显示在网页上。

请参考以下图片：

Answer 1

你的道具有错别字。 将其从 desp 更改为 desc 然后它应该可以工作。