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

您将map结果基本上array存储在变量renderJob中，而不是反应组件。

你需要像这样渲染它：

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

基本上<renderJob>将转换为：

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

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

为什么不用<renderJob/>抛出错误？

因为名字是用小写字母表示的，所以它会被视为内置组件，如div等，如果你使用<RenderJob/>，它会抛出错误RenderJob is not defined.

根据 DOC ：

当元素类型以小写字母开头时，它引用a 内置组件，例如<div>或<span>，会产生字符串＆＃39; div＆＃39; 或者＆＃39; span＆＃39;传递给React.createElement。以a开头的类型像<Foo />这样的大写字母编译成React.createElement（Foo）和对应于JavaScript文件中定义或导入的组件。

Answer 2

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

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

2 个答案: