Блог

Я рендерю различные компоненты редактора DevExtreme, но при переразложении части моего кода и размещении каждого из редакторов в отдельные компоненты sfc или class, он больше не отображает компоненты.

Работает следующее:

 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, и он определенно устанавливается, и при попытке его использования с классом вместо этого мое состояние определенно устанавливается правильно.

Есть идеи?

Спасибо.

вам необходимо использовать реквизиты для входных свойств вашего компонента

 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}