无法在react组件中呈现const-Java 学习之路

我正在使用ReactJS和GatsbyJS创建一个Web应用程序，我在组件内部渲染const时遇到了一些问题 .

我阅读了关于map（）方法的ReactJS官方文档，我真的不知道我做错了什么 .

如果有人可以帮忙：

const contents = [
    {
        title: "Allier design et performance, c'est possible",
        chapo: "Les meilleures technologies au service de votre site web."
    },
    {
        title: "Nouvel ère : les application web progressives",
        chapo: "Pour des sites web accessibles en tout lieu et tout heure."
    },
    {
        title: "Design centré utilisateur",
        chapo: "Pour un site adapté à votre cible."
    }
]
const contentList = (contents) => contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>)
)
const prevButton = () => {
    return (
        <span>Prev</span>
    )
}
const nextButton = () => {
    return (
        <span>Next</span>
    )
}


export const Teaser = ({prevButton, nextButton, contentList}) => {

    return (
        <section className="teaser">        
            <div className="container">
                {contentList}
            </div>
            <div className="slide-buttons">
                {prevButton}
                {nextButton}
            </div>
        </section>
    )
}
export default Teaser

我有 no error message in the console . 但是，当我使用React开发人员工具探索组件时，我发现我的组件未安装 .

2 回答

因为在 contentList 中你存储了箭头函数的ref，你需要调用该方法来获得结果，你也需要传递 contents 数组 .

像这样：

<div className="container">
    {contentList(contents)}
</div>

或者像这样写它以避免方法调用：

// now contentList will be an array, not a function

const contentList = contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>
    )
)

同样，你需要从prev和next按钮中删除箭头功能或者调用它们：

prevButton()

nextButton()

要么

const prevButton = (
    <span>Prev</span>
)
const nextButton = (
    <span>Next</span>
)

检查此片段，您将获得更好的主意：

const contentList = (contents) => contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>)
)

console.log('contentList = ', contentList)

回复于 2024-04-29T18:25:16+08:00

我修改了代码，只显示了与contentList相关的部分 . 为什么没有渲染nextButton和prevButton？

import React  from 'react'
import Link from 'gatsby-link'
import './teaser.scss'

const contents = [
    {
        title: "Allier design et performance, c'est possible",
        chapo: "Les meilleures technologies au service de votre site web."
    },
    {
        title: "Nouvel ère : les application web progressives",
        chapo: "Pour des sites web accessibles en tout lieu et tout heure."
    },
    {
        title: "Design centré utilisateur",
        chapo: "Pour un site adapté à votre cible."
    }
]

const contentList = contents.map((content, i) =>
    (
        <div className="item" key={i}>
            <div className="headline">
                <h1>{content.title}</h1>
                <h2>{content.chapo}</h2>
            </div>
        </div>
    )
)

console.log('contentList = ', contentList)
const prevButton = () =>  (
        <p>Prev</p>
    )

console.log('<p> Prev = ', prevButton)
const nextButton = () => (
        <p>Next</p>
    )

console.log('<p> Next = ', nextButton)   

export const Teaser = () => {

    return (
        <section className="teaser">        
            <div className="container">
                {contentList}
            </div>
            <div className="slide-buttons">
                {prevButton}
                {nextButton}
            </div>
        </section>
    )
}
export default Teaser

回复于 2024-04-29T18:25:16+08:00

无法在react组件中呈现const

2 回答

相关问题