React内联样式 - 样式prop期望从样式属性到值的映射,而不是字符串

Question

我想在我的React应用程序中设置内联样式.在这种情况下,对于跨度:

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

React告诉我:

未捕获的不变违规:style支持期望从样式属性到值的映射,而不是字符串.例如,使用JSX时style = {{marginRight:spacing +'em'}}.这个DOM节点由`SentenceView呈现

我不太清楚这意味着什么.

PS:我曾尝试不同的版本,所以我也paddingRight: 5还有paddingRight: 5 + 'px'还有paddingRight : 5px,但我没有任何成功!

Answer 1

使用" style s "prop而不是style

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

Answer 2

有一些方法可以为React Components设置样式.

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

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

1. 运用 className="your-class-name"

2. 使用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";
}

2样式对象

// <span style={styles}>

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

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

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

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




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

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

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

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

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

Answer 3

JSX 和 HTML 是不同的。请参阅Udemy 的下图：

在 HTML 中它是

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

在 JSX 中你写

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

两者的条件内联格式都不同。