Реакция Ошибка тега стиля JSX на Render

Это моя реакция на визуализацию визуализации: функция() {

  return (
          <div>
                <p className="rr">something</p>


                  <style>
                    .rr{
                      color:red;
                    }
                  </style>
          </div>    
        )
}

Это дает мне эту ошибку "JSX: ошибка: ошибка анализа: строка 22: неожиданный токен:"

Что здесь не так? Можно ли вставить полный нормальный css в реагирующий компонент?

Ответ 1

JSX - это лишь небольшое расширение для javascript, это не его собственный полный язык шаблонов. Таким образом, вы сделали бы это как в javascript:

        return (<div>
            <p className="rr">something</p>


              <style>{"\
                .rr{\
                  color:red;\
                }\
              "}</style>
      </div>)

http://jsfiddle.net/r6rqz068/

Однако нет абсолютно никаких оснований для этого.

Ответ 2

Простота использования строк шаблонов es6 (что позволяет разрывы строк). В методе рендеринга:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

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

Ответ 3

Встраиваемые стили лучше всего применять непосредственно к шаблону компонента JSX:

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

DEMO: http://jsfiddle.net/chantastic/69z2wepo/329/

Примечание. JSX не поддерживает синтаксис HTML для атрибута style

Объявить свойства при использовании имен свойств camelCase, например,

{ color: "red", backgroundColor: "white" }

Далее читайте здесь: http://facebook.github.io/react/tips/inline-styles.html

Ответ 4

"класс" - это зарезервированное слово в JavaScript. Вместо этого используйте "className".

Кроме того, вы должны помнить, что используете JSX, а не HTML. Я не верю, что jsx проанализирует ваши теги. Лучший подход - создать объект со своими стилями, а затем применить его как стиль (см. Ниже).

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)

Ответ 5

Создайте функцию для обработки вставки тега стиля.
Добавьте CSS, который требуется для строковой переменной.

Добавьте переменную в возвращаемый JSX внутри вашего тега <style>.

renderPaypalButtonStyle() {
    let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
    return (
        <style>{ styleCode }</style>
    )
}

Ответ 6

Это можно сделать, используя обратную сторону "`", как показано ниже

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)

Ответ 7

Это то, что я сделал:

  render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
    );