Добавить Dynami c TextFields через выпадающий выбор компонентов?

Question

В следующем проекте я создаю панель задач с использованием TypeScript и React в Microsoft Excel. Когда панель задач загрузится, у нее будет только базовый выпадающий список c с несколькими опциями.

import * as React from "react";
import Progress from "./Progress";
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
//import TopLevel from "./Operations/TopLevel";
//import MakeItem from "./Operations/MakeItem";
//import RawMaterial from "./Operations/RawMaterial";
//import BuyItem from "./Operations/BuyItem";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

export interface AppState {

}

export default class App extends React.Component<AppProps, AppState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
    };
  }

  componentDidMount() {
    this.setState({

    });
  }

  render() {
    const { title, isOfficeInitialized } = this.props;
    const dropdownStyles: Partial<IDropdownStyles> = {
      dropdown: { width: 300 }
    };
    const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
      { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
      { key: 'Purchased', text: 'Purchases', itemType: DropdownMenuItemType.Header },
      { key: 'rawMaterial', text: 'RAW MATERIAL' },
      { key: 'buyItem', text: 'BUY ITEM' },
    ];
    ;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
      );
    }

    return (
      <div className="ms-welcome">
            <Dropdown
              label="Operation"
              key="dropDownKey"
              options={options}
              styles={dropdownStyles}
            />
      </div>
    );
  }
}

После ответа Класа я немного изменил свой код, но возникли проблемы, потому что нет никаких ошибок. У меня есть мой App.tsx, мой TopLevel.tsx и новый файл, который я создал из-за Klas, называется Dropdown.tsx. Пока я забуду про «Make», я просто пытаюсь понять логику c. Что я здесь не так делаю?

App.tsx

import * as React from "react";
import Dropdown from "./Operations/Dropdown";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}
export interface AppState {

}

function App() {
  return <Dropdown />;
}

export default App;

Dropdown.tsx

import * as React from "react";
import TopLevel from './TopLevel';
import { useState } from 'react';
const Dropdown = (): React.ReactElement => {
    const [value, setValue] = useState("none");
    let Form: any;
    switch (value) {
      case "TopLevel":
        Form = <TopLevel title="title" logo="logo" message="message" />;
        break;

      case "Make":
        Form = <div />;
        break;

      default:
        Form = <div />;
        break;
    }
    return (
      <div>
        <select
          id="lang"
          onChange={event => event?.target?.value && setValue(event.target.value)}
          value={value}
        >
          <option value="select">Select</option>
          <option value="TopLevel">TopLevel</option>
          <option value="Make">Make</option>
        </select>
        {Form}
      </div>
    );
  };
  export default Dropdown;

TopLevel.tsx

import * as React from "react";

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}
export default class TopLevel extends React.Component<TopLevelProps> {
  render() {
    return (
      <div>
        <div>TopLevel</div>
        <input placeholder="Part Number" />
      </div>
    );
  }
}

Вот ошибка, которую я получаю.

Answer 1

Вот базовая c программа, которая имеет раскрывающийся список и отображает различные формы в зависимости от значения раскрывающегося списка.

const Dropdown = (): React.ReactElement => {
  const [value, setValue] = useState("none");

  let Form: any;
  switch (value) {
    case "TopLevel":
      Form = <TopLevel title="title" logo="logo" message="message" />;
      break;

    case "Make":
      Form = <Make />;
      break;

    default:
      Form = <div />;
      break;
  }

  return (
    <div>
      <select
        id="lang"
        onChange={event => event?.target?.value && setValue(event.target.value)}
        value={value}
      >
        <option value="select">Select</option>
        <option value="TopLevel">TopLevel</option>
        <option value="Make">Make</option>
      </select>
      {Form}
    </div>
  );
};

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}

class TopLevel extends React.Component<TopLevelProps> {
  render() {
    return (
      <div>
        <div>TopLevel</div>
        <input placeholder="Part Number" />
      </div>
    );
  }
}

class Make extends React.Component<{}> {
  render() {
    return <div>Make</div>;
  }
}

function App() {
  return <Dropdown />;
}

Обратите внимание, что switch позволяет использовать разные формы для разных values.

Используемый вами компонент DropDown также имеет свойство onChange, поэтому его можно подключать аналогичным образом, с разными визуализациями форм для разных значений.