React는 객체를 전달하더라도 인라인 스타일 속성을 문자열로 봅니다.

Question

아래 JSX를 사용하여 프로그래밍 방식으로 인라인 스타일을 설정하면 페이지가로드되지 않습니다. 문제를 설명하기 위해 코드를 단순화했습니다.

The style prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

이 내 첫 날 학습 반응하고 JSX 그래서 분명 뭔가가 있어야합니다 :

const AboutPage =() => { 
    let buttonStyle = { color: 'red' }; 
    return (
     <div> 
      <input type="button" style="{buttonStyle}" value="Click Me" /> 
     </div> 
    ); 
} 

나는 브라우저 콘솔에서이 오류가 발생합니다. 그러나 그것은 내가 옳은 일을하고있는 것처럼 보입니다 : 나는 중괄호 안에 물체 (끈이 아닌)를 넣을 것입니다. 왜 React는 이것을 문자열로 해석합니까?

Answer 1

문제는 속성 값을 인용 한 것입니다. JSX에서 정적 속성 값을 JavaScript 코드로 바꾸면 코드는 중괄호 안에 있어야하며 대괄호로 묶은 코드는 인용 할 수 없습니다. 이는 attributes-with-code를 따옴표로 묶을 수있는 다른 템플릿 언어 (예 : ASP.NET)와 다른 점이 다릅니다.

속성 값 주변의 따옴표를 제거하면 올바르게 작동합니다.

<!-- bad --> 
<input type="button" style="{buttonStyle}" value="Click Me" /> 

<!-- good --> 
<input type="button" style={buttonStyle} value="Click Me" /> 

그것은 내가 그것을 알아 냈다,하지만 난 예외 호출 스택을 통해 파고 나는 따옴표를 발견하기 전에 샘플 코드를 "반응과 방법 인라인 스타일을 설정하는"인터넷 검색 반 시간을 낭비하는 것이 이제 분명 보인다.

나는이 오류 메시지에 대해 미래의 JSX 초보자가 자신이 잘못하고있는 것을 파악할 수 있기를 희망하여이 QA를 게시하고 있습니다. ;-)