2017-01-16 14 views
2

Когда я использую 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 интерпретирует его как строку?

ответ

3

Проблема заключалась в цитатах вокруг значения атрибута. В JSX, если вы замените статическое значение атрибута кодом JavaScript, код должен быть внутри фигурных скобок, а заключенный в скобки код не может быть процитирован. Это отличается от того, как другие языки шаблонов (например, ASP.NET), где разрешены или даже требуются котировки вокруг атрибутов с кодом.

Когда я удалил кавычки вокруг значения атрибута, он работал нормально.

<!-- bad --> 
<input type="button" style="{buttonStyle}" value="Click Me" /> 

<!-- good --> 
<input type="button" style={buttonStyle} value="Click Me" /> 

Кажется очевидным, теперь, когда я понял это, но я потратил полчаса копаться исключения callstacks и прибегая к помощи «как установить встроенные стили с реагировать» пример кода, прежде чем я заметил, что кавычки.

Я размещаю это Q & Здесь, в надежде, что будущий новичок JSX сможет Google найти это сообщение об ошибке и выяснить, что они делают неправильно. ;-)

+0

Это прямо объяснено здесь: https://facebook.github.io/react/docs/dom-elements.html#style, в официальной документации. «Google reflex» слишком силен, чтобы иногда сопротивляться :) – 62mkv

+0

Рад, что вы это поняли. Вы также можете объявить стиль в строке, например: 'style = {{color:" red "}}'. Обратите внимание на двойные фигурные скобки. Также обратите внимание, что свойства css, которые обычно записываются с тире (например, font-size, text-align и т. Д.), Записываются в верблюжьем случае (например, fontSize, textAlign и т. Д.). – Chris

+1

@ 62mkv - да, это документация для встроенных стилей (и я прочитал ее перед публикацией этого), но эти документы не помогли мне, потому что моя ошибка была более фундаментальной: я не понимал, что парсер JSX запрещает цитаты вокруг атрибута значения, которые предполагается интерпретировать как JavaScript. Я просто создал запрос Pull для соответствующего раздела документов JSX (https://facebook.github.io/react/docs/introducing-jsx.html#specifying-attributes-with-jsx), чтобы получить более четкое представление о необходимости полосы кавычек. –

 Смежные вопросы

  • Нет связанных вопросов^_^