Блог

Главная - Вопросы по программированию - Какова наилучшая структура компонентов для динамических вкладок в React?

Какова наилучшая структура компонентов для динамических вкладок в React?

#reactjs

#reactjs

Вопрос:

Я создаю клон Figma. У меня есть то, что я считаю простой проблемой. В Figma вы можете добавлять линии, изображения, прямоугольники, 20 других типов элементов дизайна.

Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на эти элементы дизайна появляется инспектор, который отличается для каждого элемента (инспектор прямоугольников отличается от инспектора изображений).

Итак, должен ли я создавать 2 0 разных компонентов для каждого элемента дизайна? Каков наилучший способ структурировать это? Спасибо!

Ответ №1:

Я думаю, что лучший способ сделать это — сделать все необходимые входные данные и кнопки в другом компоненте, поэтому вы можете импортировать их следующим образом :

 import {SizeInput, ColorInput, SomthingInput} from InspectInputs;

Затем создайте объект для каждого элемента, который у вас есть, вот так :

 const inspect = {
  rectangle : [
     <SizeInput />,
     <ColorInput />,
  ],
  image : [
     <SizeInput />,
     <ColorInput />,
     <SomthingInput />
  ],
};

И, наконец, используйте их так :

 const Inspector = ({type}) => (
      <div>{inspect[type].map((child) => child)}</div>;
)

Пример

 const inputChange = (e) => {
  console.log(e.currentTarget.value);
};
const inspectArray = [
  {
    name: "Rectangle",
    element: [
      <input type="text" key="1" />,
      <input type="range" key="2" />,
      <input type="color" key="3" onInput={inputChange} />,
    ],
  },
  {
    name: "Image",
    element: [
      <div key="1">
        <input type="text" key="1.1" value="Some Value" />
        <input type="text" key="1.2" />
      </div>,
      <input type="range" key="2" />,
      <input type="color" key="3" onInput={inputChange} />,
    ],
  },
];
const Inspector = ({ index }) =>
  index !== null amp;amp; (
    <div
      style={{
        width: 300,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <h1>{inspectArray[index].name}</h1>
      {inspectArray[index].element.map((child) => child)}
    </div>
  );
function App() {
  const [inspect, setInspect] = React.useState(null);
  return (
    <div>
      {inspectArray.map((item, i) => (
        <button key={i} onClick={() => setInspect(i)}>
          {item.name}
        </button>
      ))}
      <Inspector index={inspect} />
    </div>
  );
}
ReactDOM.render(
  <App/>,
  document.getElementById("react")
); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Вы можете сделать свой элемент массива похожим на компонент и использовать onChange или onInput использовать для всего или сделать их отдельными, очень просто.

Комментарии:

1. О, потрясающе!! Это выглядит великолепно. Как я мог передать реквизит в SizeInput операционную ColorInput ?

2. используйте Context или Redux для управления реквизитами и состояниями. для чего-то большого, такого как Figma, вероятно, следует использовать библиотеку управления состоянием

3. конечно, для чего-то, что не является сложным, например, key, u может передавать каждому дочернему элементу следующим образом <SizeInput key="1" />

4. Да, но я думаю, что я немного сбит с толку тем, как вы вообще предоставите ключ? Есть ли шанс, что вы могли бы привести пример в своем ответе?

5. @NickSmith проверьте пример.