태그 오류: 렌더에서 JSX 스타일 태그 오류 반응

태그 오류: 렌더에서 JSX 스타일 태그 오류 반응

리액트 렌더 함수입니다.

render:function(){
  return (
    <div>
      <p className="rr">something</p>
      <style>
        .rr{
          color:red;
        }
      </style>
    </div>    
  )
}

이 에러가 발생합니다.

JSX: 오류: 구문 분석 오류: 줄 22: 예기치 않은 토큰:

여기 무슨 일 있어?반응 컴포넌트에 완전 일반 css를 삽입할 수 있습니까?

es6 템플릿 문자열(줄 바꿈 가능)을 사용하여 쉽게 수행할 수 있습니다.렌더링 방법:

const css = `
    .my-element {
        background-color: #f00;
    }
`

return (
    <div class="my-element">
        <style>{css}</style>
        some content
    </div>
)

사용 예에 대해서는 디버깅에 사용하는 체크박스가 있는 div에 대해 하고 있습니다.이 체크박스는 나중에 쉽게 삭제할 수 있도록 1개의 파일에 포함시키고 싶습니다.

JSX는 javascript의 작은 확장일 뿐, 완전한 템플릿 언어가 아닙니다.javascript와 같은 작업을 수행합니다.

return (
  <div>
    <p className="rr">something</p>

      <style>{"\
        .rr{\
          color:red;\
        }\
      "}</style>
  </div>
)

http://jsfiddle.net/r6rqz068/

하지만 이것을 해야 할 타당한 이유가 전혀 없다.

인라인 스타일은 컴포넌트 JSX 템플릿에 직접 적용하는 것이 가장 좋습니다.

return (
  <div>
    <p style={{color: "red"}}>something</p>
  </div>
);

데모: http://jsfiddle.net/chantastic/69z2wepo/329/

---

참고: JSX는 스타일 속성에 대한 HTML 구문을 지원하지 않습니다.

camelCase 속성 이름 사용 시 속성을 선언합니다(예:

{ color: "red", backgroundColor: "white" }

자세한 내용은 이쪽:http://facebook.github.io/react/tips/inline-styles.html

이는 다음과 같이 backtick "'를 사용하여 수행할 수 있습니다.

return (<div>
        <p className="rr">something</p>


          <style>{`
            .rr{
              color:red;
            }
          `}</style>
  </div>)

"class"는 JavaScript에서 예약된 단어입니다.대신 "className"을 사용합니다.

또한 HTML이 아닌 JSX를 사용하고 있다는 것을 기억해야 합니다.jsx가 태그를 해석할 것이라고는 생각하지 않습니다.더 나은 방법은 스타일을 사용하여 객체를 작성한 후 이를 스타일로 적용하는 것입니다(아래 참조).

var styles = {
  color:"red";
}

return (
  <div>
    <p style={styles}>something</p>
  </div>    
)

1. 스타일 태그 삽입을 처리하는 기능을 만듭니다.
2. 원하는 CSS를 문자열 변수에 추가합니다.

3. 반환된 JSX에 변수를 추가합니다.<style>태그를 붙입니다.

   renderPaypalButtonStyle() {
       let styleCode = "#braintree-paypal-button { margin: 0 auto; }"
       return (
           <style>{ styleCode }</style>
       )
   }
   

제가 한 일은 다음과 같습니다.

render(){
    var styleTagStringContent = 
    ".rr {"+
       "color:red"+
    "}";
    return (
      <style type="text/css">
        {styleTagStringContent}
      </style>
);

여러 차례 시행한 끝에 마침내 해결책을 찾았다.키가 위험하게 SetInnerHTML. 코드는 다음과 같습니다.

    <script src="https://pie-meister.github.io/PieMeister-with Progress.min.js"></script>
    import React from 'react'
    const style = ` <pie-chart class="nested" offset="top">
    <style>
    path {
    stroke-linecap: round;
    stroke-width: 90;
     }
    [color1] {
    stroke: #BFBDB2;
    stroke-width: 50;
            }
    [color2] {
    stroke: #26BDD8;
    stroke-width: 60;
            }
    [color3] {
    stroke: #824BF1;
        }
    [part="path"]:not([y]) {
    stroke: #BFBDB2;
    stroke-width: 60;
    opacity: 0.4;
               }
    </style>
    <slice color1 size="100%" radius="200"><!--No label--></slice>
    <slice color1 size="88%" radius="200" y="65"><tspan> $size</tspan></slice>
    <slice color2 size="100%" radius="100"> </slice>
    <slice color2 size="40%" radius="100" y="165"><tspan> $size</tspan></slice>
    <slice color3 size="100%" radius="0"> </slice>
    <slice color3 size="10%" radius="0" y="265"><tspan> $size</tspan></slice>
    </pie-chart>`


     export default function Styles() {
     return (
     <div dangerouslySetInnerHTML={{__html:style}}/>   
         )
         }

import styled from 'styled-components;

return (
 <div>
  <Test>something</Test>
 </div>
)

다음 단계:

const Test = styled.p`
  color: red
`;

언급URL : https://stackoverflow.com/questions/27530462/tag-error-react-jsx-style-tag-error-on-render