Можно ли опционально заменять теги в компоненте React?

Question

[Destell]

Делаю на react адресную книгу с карточками, по которым идет поиск, сортировка, могут редактироваться и т.д. Подумал, что, компоненты такого типа должны быть формами, т.е. каждая карточка - форма, но становиться таковыми должны при нажатии на "редактировать" (div => form). Как это можно адекватно реализовать? Просто сделать два компонента на редактирование и статику?

Answer 1

[Алексей Лауд]

const Form = ({ children, ...rest }) => <form {...rest}>{children}</form>;
const Div = ({ children, ...rest }) => <div {...rest}>{children}</div>;

const Card = ({ editable }) => {
  const Container = editable ? Form : Div;
  return <Container>{"Тут ваш контент"}</Container>;
};

ReactDOM.render(<Card />, document.getElementById("root"));
ReactDOM.render(<Card editable />, document.getElementById("root"));

Answer 2

[Андрей Охотников]

Можно сделать те поля которые можно редактировать в виде инпутов и задать им свойство disabled. Это свойство привязать к стейту. Когда наживаешь редактровать - стейт поменялся - все свойства disabled убираются, редактируешь, сохраняешь и снова меняешь стейт на disabled