Реагируют встроенный стиль - стиль упорка предполагает сопоставление свойств стиля для значений, а не строку

Я пытаюсь установить встроенные стили в моем приложении реагируют. В этом случае, на период:

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>

Реагировать мне говорит:

непойманные инвариант нарушение: "стиль" опора предполагает сопоставление Свойства тип значения, а не строку. Например, и GT; стиль={{marginRight: интервал + 'Они'}} при использовании JSX. Это DOM-узел оказал `SentenceView

Я не совсем уверен, что это означает.

ЗЫ: я пробовал разные версии, поэтому я сделал paddingRight: 5, а такжеpaddingRight: 5 + 'РХ'а такжеpaddingRight : 5 пикселей, но я не'т иметь никакого успеха!

Viktor Seč
Редактировал вопрос 12-го апреля 2017 в 12:53
Программирование
javascript css reactjs
12-го апреля 2017 в 9:46
15 просмотров
Решение

Использование и"стиль<удар>с</удара>" и опору, а не стиль

<span className="myClass" style={{float : 'left', paddingRight : '5px'}} > </span>
Aximili
Редактировал ответ 29-го января 2019 в 5:12
Комментарии (5)

Есть несколько способов, чтобы задать стиль для компонентов реакции.

https://facebook.github.io/react/docs/context.html

https://github.com/facebookincubator/create-react-app

  1. используя имя_класса="по-вашему-класса-именем"

  2. используя стиль={css_object} или стиль={{Color: это.реквизит.цвет}}

Среагировать РЕПЛ

https://jscomplete.com/repl

1 имя_класса & стилей.Усс

в 

import './styles.css';

/*
.classname-color{
    color: "red";
    background: "#0f0";
}
*/

const BTN = (props) => {
    return (
        <div>
            My name is {props.name}
            <hr/>
            I'm <span className="classname-color">{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);
.classname-color{
    color: "red";
    background: "#0f0";
}

в

Объект # стиль# 2

в 

// <span style={styles}>

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        <div>
           My name is {props.name}
           <hr/>
           I'm <span style={styles}>{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);

// <span style={{color: styles.color}}>

const styles = {
    color: "red",
    background: "#0f0",
    fontSize: "32px"
};

const BTN = (props) => {
    return (
        <div>
           My name is {props.name}
           <hr/>
           I'm <span style={{color: styles.color}}>{props.age}</span> yeas old!
        </div>
    );
};

const infos = {
    name: "xgqfrms",
    age: 23
};

ReactDOM.render(, mountNode);

в

Комментарии (2)

Таким образом, вы можете определить и использовать встроенный стиль с реагировать.

/**
 * Style definitions.
 */
const STYLE = {
    infoColor: {
        color: 'green'
    },
    warningColor: {
        color: 'orange'
    },
    errorColor: {
        color: 'red'
    }
};

/**
 * Component
 */
class Welcome extends React.Component {

    /**
     * Rendering into the DOM.
     */
    render() {
        return (
            <div>
                <h2 style={STYLE.infoColor}>Welcome!</h2>
        )
    }
}
Комментарии (1)

JSX и HTML отличаются:

В HTML это `в HTML в <div стиль=то"фон-цвет: красный; и"></див> В JSX вы пишите jsx в <div стиль={{ фон: 'красный' }}></див> `` Условное форматирование встроенной отличаются в обоих.

Vaibhav Vishal
Редактировал ответ 12-го августа 2019 в 3:07
Комментарии (1)

в <промежуток стиль={{ фон: "красным" Ну, свойство fontweight: и"жирный" С, размер шрифта: 50 }}> Дон'т оберните {{}} в двойные кавычки или строку

Комментарии (0)