programing

React를 사용하여 인라인 글꼴 크기 스타일 생성JS

lastcode 2023. 2. 26. 09:47
반응형

React를 사용하여 인라인 글꼴 크기 스타일 생성JS

리액트에서 이런 걸 하려고 하는데JS:

var MyReactClass = React.createClass({
    render: function() {
        var myDivText = "Hello!";
        var myFontSize = 6; //this is actually something more complicated, I'm calculating it on the fly
        var divStyle = {
            font-size: {fontSize + 'px !important;'},
        };
        return (<div style={divStyle}>{myDivText}</div>);
   }
});

이 문제는 코드를 실행하면 "Module build failed:오류: 해석 오류: 줄 5: 예기치 않은 토큰 -" 분명히 React는 그것을 좋아하지 않습니다.font-size대쉬가 들어있어요이걸 어떻게 극복하지?리액션을 위해 그 캐릭터를 벗어날 수 있는 방법이 있나요?같은 일을 하는 것보다 더 잘 반응하는 다른 css 속성이 있나요?

감사합니다!

사용하다fontSize대신font-size

해결책은 보통 대시를 포함하는 camelCase 속성에 있습니다.

http://facebook.github.io/react/tips/inline-styles.html

제 질문에 답했습니다:)

글꼴 크기: 픽셀 수를 사용합니다.

https://reactjs.org/docs/dom-elements.html에서 말하는 것처럼
첫 번째 단어를 제외한 '-'와 대소문자를 제거해야 합니다.

예-
background-color as backgroundColor,

일부만 제외하고 모든 곳에서 동일하게 적용할 수 있습니다.

aria-* and data-*

예-

aria-label as aria-label 

위는 나에게 효과가 있었다!

언급URL : https://stackoverflow.com/questions/26759819/generating-inline-font-size-style-using-reactjs

반응형