반응에서 텍스트를 출력하는 방법스팬으로 감싸지 않는 JS

반응에서 텍스트를 출력하는 방법스팬으로 감싸지 않는 JS

ReactJS 기반 응용 프로그램에서는 다음을 수행합니다.

var _ = React.DOM;
_.span(null, 'some text', _.select(null, ...));

문제는 'some text'가 DOM의 추가 스판 요소로 랩되어 있다는 것입니다.이 동작을 피하고 원시 텍스트만 출력할 수 있는 방법이 있습니까?

명확히 하자면:출력하고 싶다

<span>some text<select>...</select></span>

것은 아니다.

<span><span>some text</span><select>...</select></span>

업데이트: 이것은 React v15(2016-04-06)에서 "고정"되었습니다.이제 댓글 노드는 각 텍스트에 추가되지만 더 이상 코멘트 노드로 둘러싸여 있지 않습니다.<span>태그를 붙입니다.

이번 릴리즈에서는 커뮤니티로부터 놀라운 공헌을 받고 있으며, 특히 Michael Wincek의 풀 요청을 강조하고 싶습니다.마이클의 작업 덕분에 리액트 15는 더 이상 추가 방출을 하지 않습니다.<span>텍스트 주위의 노드를 사용하여 DOM 출력을 보다 선명하게 할 수 있습니다.이것은 React 사용자에게 오랜 골칫거리였기 때문에 외부로부터의 공헌으로 받아들이는 것은 매우 흥분되는 일입니다.

풀 릴리즈 노트

---

이것은 현재 React의 기술적 제한으로, ID를 할당하고 나중에 다시 참조할 수 있도록 범위 내의 모든 부동 텍스트 노드를 래핑합니다.향후 React 버전에서는 이 제한을 제거할 수 있기를 바랍니다.

마지막 수단으로 html을 하드코딩할 수 있습니다.

<option value={value} dangerouslySetInnerHTML={{__html: value}}></option>

음, 만약 당신이 이것을 하는데 열중하고 있고, 당신이 소품이나 주에 접근할 수 없다는 제한을 받아들인다면, 당신은 이것을 할 수 있습니다.

var Component = React.createClass({
    displayName:"Statics",
    statics: {
         customRender: function(foo) {
              return React.renderToStaticMarkup(<div 
              dangerouslySetInnerHTML={{__html: foo.bar }}/>);
         }
    },
    render: function () {
        return <div dangerouslySetInnerHTML={{__html: 
               <Component.customRender bar="<h1>This is rendered
               with renderToStaticMarkup</h1>" />}} />
    }
});

renderToStaticMarkup은 스팬이나 react-dataid를 삽입하지 않으며 정적 서버 렌더링을 위한 것입니다.좋은 생각은 아닌 것 같지만, 여기 있네요.

renderToStaticMarkup renderToString과 유사하지만 react가 내부적으로 사용하는 data-react-id 등의 추가 DOM 속성을 만들지 않습니다.추가 속성을 제거하면 많은 바이트를 절약할 수 있으므로 React를 단순한 정적 페이지 생성기로 사용할 경우 유용합니다.

http://learnreact.robbestad.com/#/static에서 결과를 확인합니다.

리액션과 리액트돔의 버전을 변경하여 완벽하게 동작했습니다.

"react": "^15.0.1",
"react-dom": "^15.0.1"

언급URL : https://stackoverflow.com/questions/24469474/how-to-output-text-in-reactjs-without-wrapping-it-in-span