一個 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 然后它應該可以工作。