JS函数结果不渲染

Question

我正在尝试呈现函数 renderVerticalCards 的结果，但是 DOM 中没有返回任何结果，除了外部 divs（那些来自函数调用之外的).我已经通过控制台确认正在调用该函数，所以我猜我的问题与我使用大括号有关，但我一直无法找到解决方案。有什么建议吗？

    view({ attrs }) {

        console.log("In view", attrs);
        console.log(attrs);
        
        const renderVerticalCards = (cards) => {
            console.log("in function")
            return(
                cards.map(card => {
                <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
                    <div class="process-card__number-container">
                        <div class="process-card__number-container__circle">
                            <div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
                        </div>
                    </div>
                    <div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
                    <div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
                    <a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>  
                </div>
                })
            )
        }

        return (
            <div class="mdc-layout-grid" style="padding-top:0">
                <div class="mdc-layout-grid__inner">
                { renderVerticalCards(this.cards) }
                </div>
            </div>
        )
    }

Answer 1

尝试：

cards.map(card => {
return (
                    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-4-phone mdc-layout-grid__cell--span-3-tablet mdc-layout-grid__cell--span-4-desktop process-card">
                        <div class="process-card__number-container">
                            <div class="process-card__number-container__circle">
                                <div class="process-card__number-container__circle process-card__number-container__circle__number"> {card.Number} </div>
                            </div>
                        </div>
                        <div class=".tk-typography--title-md process-card__title"> {card.Title} </div>
                        <div class="mdc-typography--body preserve-linebreaks process-card__text"> {card.ContentText} </div>
                        <a class="mdc-button process-card__link" href={card.Link}> {card.LinkText} </a>  
                    </div>
);
                    })

JS函数结果不渲染

JS function result not rendering

javascript

reactjs

mithril.js