ReactJS와 일반 자바 스크립트 코드를 함께 사용합니다.

React와 함께 작업하려합니다. 일부 내용과 로직을 담고있는 해당 JS 스크립트가있는 HTML 페이지가 있습니다. 이제 React를 사용하여 버튼 클릭 이벤트 내에서 재사용 가능한 일부보기 구성 요소를 동적으로 작성하기로 결정했습니다.ReactJS와 일반 자바 스크립트 코드를 함께 사용합니다.

간단한 예 :

HTML

<script src="/ReactTester/react/react.js"></script> 
<script src="/ReactTester/react/react-dom.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 

<script src="/ReactTester/myreact.js" type="text/babel"></script> 

<button onclick="button_click()">Button</button> 
<div id="example"></div>

은 JS + 반작용

var HelloWorld = React.createClass(
{ 
    render: function() 
    { 
     return(<h1>Hello, world!</h1>); 
    } 
}); 

var button_click = function() 
{ 
    ReactDOM.render(<HelloWorld/>, document.getElementById('example')); 
}

나는 오류

ReferenceError: 'button_click' is not defined

내가 렌더링하려고하면에게 얻을 버튼을 클릭하면 사용하지 않는 요소 버튼 이벤트는 잘 작동합니다. 그것은 React와 일반 JS 코드를 섞는 데 문제가있는 것 같습니다. 내가 놓친 게 있니? 뭐가 문제 야?

어떤 힌트라도 좋을 것입니다. 미리 감사드립니다!

출처

2016-07-03 Dennis

어떻게 그 페이지를 렌더링하고 있습니까? 일부 http 서버를 통해 파일 시스템을 해제 하시겠습니까? –

Tomcat 인스턴스를 통해. 그것은 이클립스 프로젝트로서, .war – Dennis

은 파일에 정의 된이

var HelloWorld = React.createClass({ 
    render: function() { 
     return (
      <h1>Hello, world!</h1> 
     ); 
    } 
}); 

var button_click = function() { 
    ReactDOM.render(<HelloWorld />, document.getElementById('example')); 
} 

document.getElementByTagName('button')[0].addEventListener('click', button_click);

출처

2016-07-03 12:22:32

은 매력처럼 작동합니다. 너는 나의 영웅이야! :) 탱크 – Dennis

button_click 기능은 전역 범위에서 사용할 수 없습니다보십시오. window 개체 (예 : window.button_click = ...)를 통해 전역 범위에 연결하면 작동합니다. 그러나 전역 범위 오염이 없으므로 다른 대답에 명시된 것처럼 이벤트 처리기를 명시 적으로 연결하는 것이 더 좋은 옵션입니다.

출처

2016-07-03 12:34:23 Pcriulan

ReactJS와 일반 자바 스크립트 코드를 함께 사용합니다.

답변

관련 문제