web-dev-qa-db-ja.com

Reactインラインスタイル-スタイルプロパティは、文字列ではなく、スタイルプロパティから値へのマッピングを想定しています

Reactアプリケーションでインラインスタイルを設定しようとしています。この場合、スパンの場合：

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

Reactが教えてくれます：

キャッチされない不変違反：styleプロパティは、文字列ではなく、スタイルプロパティから値へのマッピングを想定しています。たとえば、JSXを使用する場合、style = {{marginRight：スペース+ 'em'}}。このDOMノードは `SentenceViewによってレンダリングされました

それが何を意味するのかよくわかりません。

PS：さまざまなバージョンを試したので、paddingRight: 5とpaddingRight: 5 + 'px'およびpaddingRight : 5pxを試しましたが、成功しませんでした！

javascriptcssreactjs
38
George Welder

「styleを使用s「スタイルの代わりに小道具

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

Reactコンポーネントのスタイルを設定する方法がいくつかあります。

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 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);
22
xgqfrms

これは、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>
        )
    }
}
1
zappee

JSXとHTMLは異なります： Difference between JSX and HTML

HTMLでは

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

JSXでは次のように記述します

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

条件付きインライン書式は両方で異なります。

0
kanishk verma

{{}}を二重引用符または文字列でラップしないでください

0
zaib