반응형
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
반응형
'programing' 카테고리의 다른 글
Angularjs 중첩 상태: 3 수준 (0) | 2023.02.26 |
---|---|
리액트 프로젝트에 SCSS 스타일을 추가하는 방법 (0) | 2023.02.26 |
MySQL이 계속 크래시되다 (0) | 2023.02.26 |
저장 상태 변경 시 React-redux 구성 요소가 다시 렌더링되지 않음 (0) | 2023.02.26 |
엔티티 클래스 이름이 밑줄이 있는 SQL 테이블 이름으로 변환됩니다. (0) | 2023.02.26 |