React inline style - style 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

使用“styles”道具代替style

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

这是来自 W3Schools 的一个很好的参考，它还向您展示了如何创建具有样式信息的对象，并在 style 属性中引用它： reference for how to style React using CSS

Answer 2

这是您可以通过 react 定义和使用内联样式的方式。

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

Answer 3

有一些方法可以为 React 组件设置样式。

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

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

1. 使用style={css_object} 或style={{color: this.props.color}}

2. 使用className="your-class-name"

反应 REPL

https://jscomplete.com/repl

1 样式对象

// <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);

2 类名和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";
}

Answer 4

不要将 {{}} 括在双引号或字符串中

Answer 5

JSX 和 HTML 是不同的。见the graphic below from Udemy：

在 HTML 中是

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

在 JSX 中你写

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

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

Answer 6

JSX 和 html 是不同的东西，我们有一些不同的语法来在 jsx 中添加内联 css 我建议阅读整个文档以便更好地理解 https://www.w3schools.com/react/react_css.asp