Когда я использую JSX ниже, чтобы программно создавать встроенные стили, страница не загружается. Я упростил код для тривиального примера, чтобы проиллюстрировать проблему.React видит встроенный атрибут стиля как строку, хотя я передаю объект
const AboutPage =() => {
let buttonStyle = { color: 'red' };
return (
<div>
<input type="button" style="{buttonStyle}" value="Click Me" />
</div>
);
}
Я получаю эту ошибку в консоли браузера:
The style prop expects a mapping from style properties to values,
not a string. For example, style={{marginRight: spacing + 'em'}} when
using JSX.
Это мой первый ученость день React и JSX поэтому я должен быть отсутствующий что-то очевидное. Но похоже, что я поступаю правильно: я помещаю объект (а не строку) внутри фигурных скобок. Почему React интерпретирует его как строку?
Это прямо объяснено здесь: https://facebook.github.io/react/docs/dom-elements.html#style, в официальной документации. «Google reflex» слишком силен, чтобы иногда сопротивляться :) – 62mkv
Рад, что вы это поняли. Вы также можете объявить стиль в строке, например: 'style = {{color:" red "}}'. Обратите внимание на двойные фигурные скобки. Также обратите внимание, что свойства css, которые обычно записываются с тире (например, font-size, text-align и т. Д.), Записываются в верблюжьем случае (например, fontSize, textAlign и т. Д.). – Chris
@ 62mkv - да, это документация для встроенных стилей (и я прочитал ее перед публикацией этого), но эти документы не помогли мне, потому что моя ошибка была более фундаментальной: я не понимал, что парсер JSX запрещает цитаты вокруг атрибута значения, которые предполагается интерпретировать как JavaScript. Я просто создал запрос Pull для соответствующего раздела документов JSX (https://facebook.github.io/react/docs/introducing-jsx.html#specifying-attributes-with-jsx), чтобы получить более четкое представление о необходимости полосы кавычек. –