Question

我正在使用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

我在控制台中没有错误消息。但是，当我使用React开发人员工具探索组件时，我发现我的组件未安装。

Answer 1

因为在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>
)

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

＆＃13;

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)

＆＃13;

Answer 2

我修改了代码，只显示了与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

无法在react组件中呈现const

2 个答案: