无法在 React 组件中呈现 const

Question

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

我看了 ReactJS 官方文档关于 map() 方法，我真的不知道我做错了什么。

如果有人能帮忙:

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>
    )
)

同样，您需要从上一个和下一个按钮中删除箭头功能或调用它们：

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)

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

Cannot render const in a react component

javascript

web-applications

reactjs

gatsby