Styling in React с использованием var vs vanilla css

-3

Я искал способ стилизации компонентов в React, я следил за этим: tutorial link, но я продолжаю получать синтаксические ошибки, даже если im копирует/вставляет код, так что либо я что-то пропустил, либо есть лучший способ сделать это. забыл добавить код:Styling in React с использованием var vs vanilla css

import React, { Component } from 'react'; 

export default class Test extends Component { 
    var backgroundStyle = React.createClass({ 
    render: function() { 
     padding: 10, 
     margin: 10, 
     backgroundColor: "#ffde00", 
     color: "#333", 
     display: "inline-block", 
     fontFamily: "monospace", 
     fontSize: "32", 
     textAlign: "center" 
     }; 

     return (
     <div style={backgroundStyle}>Hi there</div> 
    ); 
    } 
    }); 
}

источник

2017-02-22 Nicholas Ritson

Как мы узнаем, пропустили вы что-то или нет, если вы ничего не знаете о своем коде, строительной среде и т. д. –

* мы не знаем;) –

im спрашивает, настраивать ли его как переменную правильный путь, я могу легко установить в таблицу стилей и применить className к элементу, но из того, что прочитано, это не правильный способ, который React хочет использовать, так что, видимо, var, но если я это сделаю, он не будет компилироваться, поэтому это правильный путь, но неправильно отформатирован? или это неправильный путь? –

Выпуск находится в этой строке:

var backgroundStyle = React.createClass({

Причина проста один, стиль принять object и React.CreateClass возвращается и html часть не object, вы пропустили эту часть в м где они определили стиль в отдельном object вместо react component и использовали это внутри возврата. проверить ссылку снова, беги ниже фрагмент кода, он будет работать:

class Test extends React.Component { 
 
render(){ 
 
    var backgroundStyle = { 
 
     padding: 10, 
 
     margin: 10, 
 
     backgroundColor: "#ffde00", 
 
     color: "#333", 
 
     display: "inline-block", 
 
     fontFamily: "monospace", 
 
     fontSize: "32", 
 
     textAlign: "center" 
 
     }; 
 
     
 
     return (
 
     <div style={backgroundStyle}>Hi there</div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<Test/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id='app'></div>

источник

2017-02-22 17:48:23

Проблема не только в этой строке. Весь код не имеет смысла (к сожалению). См. [Мой комментарий] (https://stackoverflow.com/questions/42397874/styling-in-react-using-var-vs-vanilla-css?noredirect1_comment71944846_42397874) за все, что не так. –

@FelixKling Я сомневаюсь, что вы человек или бог, вы удивительный чувак :) салют за это :) –

спасибо, что поняли, это сделало это для меня, исправили все остальные части –

Попробуйте

import React, { Component } from 'react'; 

export default class Test extends Component { 
    render() { 
     const backgroundStyle = { 
     padding: 10, 
     margin: 10, 
     backgroundColor: "#ffde00", 
     color: "#333", 
     display: "inline-block", 
     fontFamily: "monospace", 
     fontSize: "32", 
     textAlign: "center" 
     }; 

     return (
     <div style={backgroundStyle}>Hi there</div> 
    ); 
    } 
    }); 
}

источник

2017-02-22 17:42:56 spirift

OP может понадобиться немного больше, чем просто «попробуйте это». –

Вы вложенности React.createClassвнутри РЕАКТ компоненту class определение ...

Если вы определяете только один компонент (который, кажется, вы делаете), делаете то или другое, но не то, и другое.

Кроме того, вы пытаетесь определить класс CSS непосредственно в JavaScript, используя CSS синтаксис (который не является допустимым JavaScript) внутри есть функция JavaScript ...

Проверьте ваш комментарии, Феликс очерчивает вышеизложенное и многое другое ...

источник

2017-02-22 18:03:09 Pineda

Styling in React с использованием var vs vanilla css

ответ

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