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

【问题标题】：Components not rendered in React when created in function在函数中创建时未在 React 中呈现的组件
【发布时间】：2020-09-27 23:04:16
【问题描述】：

我正在渲染各种 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 中检查了该项目，它肯定已设置，当尝试使用类代替时，我的状态肯定设置正确。

有什么想法吗？

谢谢。

【问题讨论】：

标签： reactjs devexpress devextreme

【解决方案1】：

你需要为你的组件输入属性使用 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}

【讨论】：