Thymeleafth:reactJS의 텍스트 사용 방법

Thymeleafth:reactJS의 텍스트 사용 방법

Thymeleaf로 springboot 어플리케이션을 실행하고 있으며 응답합니다.JS. 모든 HTML 텍스트는 페이지에서 th:text를 사용하여 message.properties에서 읽지만, 내가 reactJS HTML 블록에 th:text가 있을 때, 반응합니다.JS는 그것에 대해 화가 난 것 같습니다.

render() {
  return (
      <input type="text" th:text="#{home.welcome}">
  )
}

오류:

Namespace tags are not supported. ReactJSX is not XML.

위험하게 SetInnerHTML을 사용하는 것 외에 해결책이 있습니까?

감사해요!

정상적인 해결 방법이 없습니다.

Thymeleaf가 XML을 출력하고 JSX 파서가 XML을 구문 분석하지 않기 때문에 이 오류가 발생합니다.

JSX가 XML과 매우 매우 유사하기 때문에 그렇게 했습니다. 하지만 그들은 매우 다릅니다. 그리고 만약 여러분이 어떻게든 Thymeleaf를 해킹해서 이름이 붙은 속성을 벗겨내고, 렌더링할 구성 요소를 얻었다고 해도, 그것은 나중에 사용될 때 부서지는 덕트 테이프와 배심원이 조작한 코드의 잠깐의 순간에 불과할 것입니다.

JSX는 자바스크립트이기 때문에 이것은 정말 정말 나쁜 생각입니다.Javascript를 즉시 생성하고 있습니다.장기적으로 효과가 없을 것이라는 몇 가지 이유를 말씀드리자면,

• 따라서 성분을 테스트하는 것이 불가능하지는 않더라도 어렵습니다.
• 애플리케이션 상태에 대한 추론은 특정 상태의 소스가 Thymeleaf 또는 JS에서 온 것인지 파악하는 데 어려움을 겪을 것이기 때문에 악몽이 될 것입니다.
• Thymeleaf가 불량 JS를 출력하면 응용 프로그램이 완전히 중단됩니다.
• 개발자들이 서버 측 데이터를 클라이언트 측에 렌더링할 수 있는 용이성을 악용하여 애플리케이션 아키텍처가 비정상적으로 변하게 됨에 따라 이러한 문제는 시간이 지남에 따라 모두 악화될 것입니다(Thyme?).

이것을 하지 마세요.Thymeleaf를 사용하거나 React를 사용합니다.

샘플 대안:저는 주로 Java 백엔드로 지원되는 React 애플리케이션에서 작업합니다.그래서 저는 어떻게 누군가가 이 잡종을 발견할 수 있었는지 이해하고 그것이 좋은 생각이라고 생각합니다.이미 Thymeleaf를 사용하고 있을 가능성이 높으며 서블릿을 다시 쓰는 것을 피하면서도 React의 힘을 얻을 수 있는 방법을 찾고 있습니다.

우리는 2년 전에 비슷한 보트를 탔습니다. JSP 프론트엔드가 노후된 것을 제외하고 말이죠. 하지만 그 차이는 무시할 수 있습니다.JSP 페이지를 사용하여 전체 React 응용 프로그램을 부트스트랩하는 것이 우리가 한 일입니다.이제 사용자에게 렌더링하는 JSP 페이지가 하나 있습니다.이 JSP 페이지는 JSON을 하나로 출력합니다.<script>태그에는 초기 시작 데이터가 포함되어 있으며 그렇지 않으면 즉시 가져와야 합니다.여기에는 리소스, 속성 및 일반 데이터만 포함됩니다.

그런 다음 다른 것을 출력합니다.<script>전체 독립 실행형 React 응용 프로그램이 포함된 컴파일된 JS 모듈의 위치를 가리킵니다.이 응용 프로그램은 시작할 때 JSON 데이터를 한 번 로드한 다음 나머지를 백엔드 호출합니다.일부 지역에서는 JSP를 사용해야 하는데, 이는 이상적이지는 않지만 귀사의 솔루션보다 더 나은 것입니다.우리가 하는 일은 JSP 페이지가 JSON을 포함하는 단일 속성을 출력하도록 하는 것입니다.이런 식으로(그리고 XHR 라이브러리의 신중한 가지치기를 통해) JSP 프레임워크 위에 구축된 가난한 사람의 데이터 교환 계층을 변경할 시간이 없습니다.

이것은 확실히 이상적이지는 않지만 잘 작동하며 React의 많은 장점들로부터 많은 혜택을 받았습니다.이러한 고유한 구현에 문제가 있을 경우 이를 분리하고 해결하기가 쉽습니다.

Thymeleaf에서 ReactJS 앱을 랩할 수 있습니다.정적 영구 부품(예: 일부 링크 또는 표시된 데이터)을 원할 경우 Thymeleaf를 사용할 수 있습니다.복잡한 부품(DOM 재인증, 공유 데이터, UI/소켓/기타에서 업데이트가 필요한 부품)이 있으면 React를 사용할 수 있습니다.

상태를 통과해야 하는 경우 Redux/기타 방법을 사용할 수 있습니다.

백엔드가 Rest API를 통해 React 파트로 데이터를 전송하고 Thymeleaf를 사용하여 단순한 부분을 fragment로 렌더링하거나 전체 HTML 청크로 렌더링할 수 있습니다.

기억하세요, Thymeleaf는 정말 HTML에 불과합니다. React는 HTML로 렌더링되는 가상 DOM입니다. 하나를 다른 하나로 마이그레이션하는 것은 실제로 꽤 쉽습니다.따라서 Thymeleaf/HTML에 "정적" 또는 UI에 크게 반응하지 않는 부분을 쓸 수 있습니다. 또한 React에서도 해당 부분을 렌더링할 수 있지만 State는 사용하지 않습니다.

Thymeleaf 3을 사용하면 Java의 변수를 별도의 JS 파일로 렌더링할 수 있습니다.JSX에 전달할 수 있는 옵션이기도 합니다.

function showCode() { var code = /*[[${code}]]*/ '12345'; document.getElementById('code').innerHTML = code; }

특성 이데터접특예성사두이)을 할 수 .data-th-text="${message}"). https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#support-for-html5-friendly-attribute-and-element-names

언급URL : https://stackoverflow.com/questions/35510634/how-to-use-thymeleaf-thtext-in-reactjs