소문자 구성 요소 이름 (사용)은 JSX에서 더 이상 지원되지 않습니다. <use>

Question

<use>이 JSX에서 유효하다고 생각하여 React JSX에서 svg 요소를 사용하고 있습니다. 다음 오류가 맞습니까?

소문자 구성 요소 이름 (사용) 더 이상 JSX에서 지원되지 않습니다 다음 dangerouslySetInnerHTML가 고정 사용하여 파일을

<svg className="icon"> 
    <use xlink:href="#icon-call"></use> 
</svg> 

을 구문 분석하는 동안 http://fb.me/react-jsx-lower-case를 참조하십시오.

<svg className="icon" dangerouslySetInnerHTML={{__html:'<use xlink:href="#icon-dnd-on"></use>'}}> 
</svg> 

Answer 1

TL; DR

난 당신이 지금 dangerouslylSetInnerHTML를 사용하여 붙어 있다고 생각.

설명

는 HTML/SVG 요소의 하위 집합을 지원하고 <use />이 supported yet 아니다 반응한다.

v0.12와 함께 반응이 restricting lower-case tag names to only HTML/SVG elements으로 전환되었지만 사용자가봤을 때 허용 목록에없는 요소에 대해서는 실패합니다. FB는 아직 지원하지 않는 유효한 태그에 대해 opening an issue을 권장합니다.

당신은 <use /> 태그를 렌더링에 반응 강제로 {React.createElement('use')}를 사용할 수 있지만 여전히 알 수없는 DOM 속성을합니다 (open issue on the topic 참조)를 지원하지 않습니다 반작용 때문에 당신이 xlink:href 속성을 설정 허용하지 않습니다. 이전 호에서는 this.getDOMNode().setAttribute을 componentDidMount으로 설정하여 비표준 속성을 설정하는 것이 좋지만 사용 사례에 따라 dangerouslySetInnerHTML 옵션보다 훨씬 불편할 수 있습니다.