渲染地图不在屏幕上显示数据

Question

我似乎无法正确渲染我的 renderJob 映射。我在控制台中没有错误，并且在没有任何显示时无法弄清楚。我将对象映射到索引的方式有问题吗？

import React, { Component } from 'react'
import PropTypes from 'prop-types'


const jbSampleData = [
    {
        name: 'A place',
        location: 'USA',
        engineer: "Contact Engineer",
        service: "Last install"
    },
]

class Job extends Component {
    render() {

        const renderJob = this.props.data.map((obj, idx) => {
            return (
                <div key={idx}>
                    <div>
                        <p>
                            <span>Name:</span> {obj.name} < br/>
                            <span>Location:</span> {obj.location} <br />
                            <span>Engineer Contact:</span> {obj.engineer} <br />
                            <span>Service:</span> {obj.service} <br />
                        </p>
                    </div>
                </div>
            );
        });

        return (
            <div>
                <renderJob />
                Hello
            </div>
        )
    }
}


Job.propTypes = {
    data: PropTypes.arrayOf(
        PropTypes.object
    )
}

Job.defaultProps = {
    data: jbSampleData
}
export default Job;

Answer 1

而不是 <renderJob /> 更改为 {renderJob}

Answer 2

您将 map 结果基本上存储在变量 renderJob 中的 array，这不是 React 组件。

你需要这样渲染：

return (
    <div>
        {renderJob}
        Hello
    </div>
)

基本上 <renderJob> 将转换为：

React.createElement(renderJob, null);    //new custom element

但是在 {renderJob} 的情况下，它的值将被替换，并且该变量拥有的所有 ui 项都将被渲染。

Why it is not throwing the error with <renderJob/> ?

因为名称是用小写字母表示的，所以它会被认为是一个 built-in 组件，如 div 等，如果你使用 <RenderJob/> 它将抛出错误 RenderJob is not defined.

根据DOC:

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string 'div' or 'span' passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

渲染地图不在屏幕上显示数据

Render map not displaying data on screen

mapping

dictionary

render

reactjs