React inline style - style prop ожидает сопоставление свойств стиля со значениями, а не с строкой

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

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

React говорит мне:

Неоткрытое инвариантное нарушение: style prop ожидает, что отображение из свойства стиля для значений, а не строки. Например, style = {{marginRight: spacing + 'em'}} при использовании JSX. Этот DOM nodeбыл предоставлен `SentenceView

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

PS: Я пробовал разные версии, поэтому я сделал paddingRight: 5, а также paddingRight: 5 + 'px', а также paddingRight : 5px, но я не имел никакого успеха!

Ответы

Ответ 1

Используйте опору " style s " вместо стиля

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

Ответ 2

Есть несколько способов установить стиль для React Components.

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

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

используя className="your-class-name"
используя style={css_object} или style={{color: this.props.color}}

Реагировать REPL

https://jscomplete.com/repl

1 className & `stylesheet.css`

import './styles.css';

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


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

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

ReactDOM.render(<BTN {...infos} />, mountNode);

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

Ответ 3

Вот как вы можете определить и использовать встроенный стиль с реакцией.

/**
 * 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>
        )
    }
}

Ответ 4

JSX и HTML разные:

В HTML это

<div style="background-color: red;"></div>

В JSX вы пишете

<div style={{ backgroundColor: 'red' }}></div>

Условное встроенное форматирование отличается в обоих.

Ответ 5

не заключайте {{}} в двойные кавычки или строку

Ответ 6

Ниже ответ более информативен:
fooobar.com/info/708996/...

Хочу поделиться своим опытом в производственном проекте
- Я использовал 1-й вариант, скопировал стиль в CSS и передал className вactjs - это безопасно, если у вас уже есть css.
- Не используется 2-й вариант, потому что нам нужно сделать верблюжий корпус, как background-color, для backgroundColor, где мы можем ошибиться - поэтому рискованно, если у вас уже есть css.