在函数中创建时未在React中呈现的组件

问题描述

我正在渲染各种DevExtreme编辑器组件，但是在重构一些代码并将每个编辑器放入单独的sfc或类组件时，它不再呈现这些组件。

以下作品：

createFields(items) {
    return items.map((item) => {
        return (
            <SimpleItem
              key={item.itemId}
              dataField={item.fieldName} />
        );
    });
}

但以下内容不是：

import CreateTextBox from "./../fields/createTextBox";
import CreateNumberBox from "./../fields/createNumberBox";

createFields(items) {
    return items.map((item) => {
        return this.createField(item);
    });
}

createField(item) {
    switch (item.type) {
        case "text":
            return <CreateTextBox item={item} key={item.itemId} />;
        case "numeric":
            return <CreateNumberBox item={item} key={item.itemId} />;
    }
}

每个编辑器都有一个单独的文件，其中包含以下内容：

import React from "react";
import { SimpleItem } from "../../../node_modules/devextreme-react/form";

const CreateTextBox = (item) => {     
    return (
       <SimpleItem key={item.itemId} 
                   dataField={item.fieldName} 
                   editorType='dxTextBox'
       />);
};

export default CreateTextBox;

以上是针对文本框编辑器的。

请注意，将sfc转换为类没有区别。

我没有收到任何错误或警告，并且已经在sfc中检查了该项目，并且确实已对其进行设置，而在尝试使用该类时，我的状态绝对是正确设置的。

有什么想法吗？

谢谢。

解决方法

你需要为你的组件输入属性使用 props

import React from "react";
import { SimpleItem } from "../../../node_modules/devextreme-react/form";

const CreateTextBox = (props) => {     
    return (
       <SimpleItem key={props.item?.itemId} 
                   dataField={props.item.fieldName} 
                   editorType='dxTextBox'
       />);
};

export default CreateTextBox;

或者你可以像这样提取参数中的道具：

const CreateTextBox = ({item}) => {     
    return (
       <SimpleItem key={item?.itemId}