antd: Как использовать символ переноса строки в Form label?

Question

antd Form

<Form.Item<MyRequest>
    label="My Long Special, \nVery Special String"            // here!
    name="mylongspecialstring"
>
    <Input placeholder="Нет" />
</Form.Item>

По разному пытался: ", ', /\n/, механический перенос, и даже <br />.

Answer 1

В вашем случае передаётся строка, которая воспринимается как обычный текст, т.е. HTML теги не парсятся как HTML.

Из документации говорится, что пропс label у Form.Item имеет тип ReactNode, по этому вот несколько решений:

Передавайте как JSX: ✅

label={ <>
  My Long Special, 
  <br />
  Very Special String
</> }

Используйте какие-нибудь парсеры строк в HTML, например html-react-parser
Минусы:
- тяжелая либа;
- избыточное решение для простых решений, как ваше;
- риск XSS.

БЛОГ НА HUSL

antd: Как использовать символ переноса строки в Form label?

Ответы (1 шт):