web-dev-qa-db-fra.com

React inline style - style prop attend un mappage des propriétés de style vers des valeurs, pas une chaîne

J'essaie de définir des styles en ligne dans mon application React. Dans ce cas, pour une durée:

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

Réagir me dit:

Violation invariante non capturée: la propriété style attend un mappage des propriétés de style aux valeurs, pas une chaîne. Par exemple, style = {{{marginRight: spacing + 'em'}} lors de l'utilisation de JSX. Ce nœud DOM a été rendu par `SentenceView

Je ne sais pas trop ce que cela signifie.

PS: J'ai essayé différentes versions. J'ai donc utilisé paddingRight: 5 ainsi que paddingRight: 5 + 'px' ainsi que paddingRight : 5px, mais je n'ai pas eu de succès!

javascriptcssreactjs
38
George Welder

Utilisez "styles"prop au lieu de style

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

Il existe quelques façons de définir le style pour React Components.

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

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

  1. en utilisant className="your-class-name"

  2. en utilisant style={css_object} ou style={{color: this.props.color}}

Réagir REPL

https://jscomplete.com/repl

1 nomClasse & 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";
}

Objet de style 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

C’est ainsi que vous pouvez définir et utiliser le style en ligne avec 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 ET HTML sont différents: Difference between JSX and HTML

En HTML c'est

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

En JSX, vous écrivez

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

Le formatage en ligne conditionnel est différent dans les deux cas.

0
kanishk verma

ne pas envelopper le {{}} entre guillemets ou chaîne

0
zaib