인라인 스타일 반응 - 스타일 프로포드는 스타일 속성에서 문자열이 아닌 값으로 매핑되어야 합니다.

인라인 스타일 반응 - 스타일 프로포드는 스타일 속성에서 문자열이 아닌 값으로 매핑되어야 합니다.

리액트 어플리케이션에서 인라인 스타일을 설정하려고 합니다.이 경우 스팬은 다음과 같습니다.

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

반응:

적발되지 않은 불변 위반:그styleprop는 스타일 속성에서 문자열이 아닌 값으로의 매핑을 예상합니다.예를 들어, JSX를 사용할 경우 style=marginRight: spacing + 'em'}을(를)이 DOM 노드는 'SentenceView'에 의해 렌더링되었습니다.

나는 그것이 무엇을 의미하는지 잘 모르겠다.

PS: 여러 가지 버전을 시도해 봤기 때문에paddingRight: 5게다가paddingRight: 5 + 'px'게다가paddingRight : 5px하지만 나는 아무런 성공도 거두지 못했어!

"style" 사용 s. 스타일 대신 소품

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

W3Schools의 훌륭한 레퍼런스는 스타일 정보를 사용하여 오브젝트를 작성하는 방법과 스타일 속성: CSS를 사용하여 스타일 리액트를 하는 방법에 대한 레퍼런스도 보여줍니다.

반응 구성요소의 스타일을 설정하는 몇 가지 방법이 있습니다.

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"

리액트 리플

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";
}

JSX와 HTML은 다릅니다.Udemy에서 다음 그림을 참조하십시오.

HTML에서는

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

JSX에서는 다음과 같이 씁니다.

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

조건부 인라인 포맷은 둘 다 다릅니다.

이렇게 하면 인라인 스타일을 정의하여 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>
        )
    }
}

우리가 반응으로 인라인 스타일링을 사용할 때 우리는 항상 사용해야 한다.style={{styleproperties}}

오류:

<input style="margin:0 15px 0 0"/>

솔루션:

<input style={{margin:"0 15px 0 0"}}/>

{{}}을(를) 큰따옴표나 문자열로 감싸지 마십시오.

언급URL : https://stackoverflow.com/questions/43366026/react-inline-style-style-prop-expects-a-mapping-from-style-properties-to-value