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

Question

Je suis en train de mettre styles en ligne dans mon Réagir application. Dans ce cas, pour une durée de:

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

Réagir me dit:

Non interceptée Invariant Violation: L' style prop s'attend à une cartographie de l' des propriétés de style pour les valeurs, pas une chaîne de caractères. Par exemple, style={{marginRight: espacement + 'em'}} lors de l'utilisation de JSX. Ce nœud DOM a été rendu par " SentenceView

Je ne suis pas tout à fait sûr de ce qu'il signifie.

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

Answer 1

Utilisez l'accessoire " style s " au lieu du style

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

Answer 2

Il y a quelques façons de définir le style de Réagir Composants.

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

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

1. à l'aide de className="your-class-name"

2. à l'aide de style={css_object} ou style={{color: this.props.color}}

Réagir 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 Objet de style

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

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