Реагировать JSX Style Tag Ошибка на Рендер

Question

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

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


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

Это дает мне эту ошибку «JSX: Ошибка: Синтаксическая ошибка: Строка 22: Неожиданный маркер: "

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

Answer 1

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

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


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

http://jsfiddle.net/r6rqz068/

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

Answer 2

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

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

var styles = { 
    color:"red"; 
} 

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

Answer 3

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

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

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

---

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

Decla повторно свойства в использовании верблюжьих имен свойств, например,

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

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

Answer 4

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

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

Answer 5

Это может быть сделано с помощью обратного одиночных кавычек «`», как показано ниже

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


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

Answer 6

легко сделать с помощью строк шаблона ES6 (который позволяет переносы строк). В вашей визуализации методы:

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

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

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

Answer 7

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

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

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