Preact 映射数据数组

Question

我正在构建一个组件，它将动态列出接下来的三个会议日期。在组件内部，当我 console.log props 变量映射数组中的每个字符时。控制台日志中的第一行是从 getMeetingDates 函数返回的内容

这是渲染图

render() {
    return (
        <div class={style.sidebar}>
            <div className="sidebar-sections">
                <h3>Next Meeetings</h3>
                {this.getMeetingDates().map(date => <MeetingDates {...date} />)}
            </div>
        </div>
    );
}

我是不是做错了什么？

Answer 1

您正在传播一个字符串作为道具：

<MeetingDates {...date} />

说 date 是 foo 或其他什么，上面的意思是

<MeetingDates f o o />

相反，将 date 作为 prop 传递：

this.getMeetingDates().map(date => 
    <MeetingDates date={date} />
)

Preact 映射数据数组

Preact map array of data

reactjs

preact