리액트 컴포넌트에서 외부 Javascript 함수를 호출합니다.

리액트 컴포넌트에서 외부 Javascript 함수를 호출합니다.

이전에 이 문제를 물어본 적이 있는지, 아니면 reactjs에서 같은 문제가 발생한 적이 있는지 모르겠습니다.시나리오가 이렇습니다.javascript를 포함한 index.html 파일을 가지고 있습니다.반응 컴포넌트에서는 조건이 true일 경우에만 렌더링되는 조건이 있습니다.즉, 페이지가 로드되었을 때 구성요소가 아직 렌더링되지 않았습니다.버튼을 전환하면 해당 구성요소가 렌더링됩니다.그 자 컴포넌트는 my index.html에 포함된 javascript 메서드를 호출해야 합니다.어떻게 해야 되지?

어떤 도움이라도 대단히 감사합니다.

index.html의 경우

<script type="text/javascript">
  function test(){
    alert('Function from index.html');
  }
</script>

컴포넌트 내

componentWillMount() {
  window.test();
}

2022 활자 편집:

파일 생성global.d.ts(doc):

interface Window {
  test: () => void;
}

✔

이 솔루션을 사용하여 TypeScript를 활성화한 상태에서 React에서 글로벌 함수를 호출합니다.

index.html 또는 some_site.js 중 하나입니다.

function pass_function(){
  alert('42');
}

그런 다음 반응 성분에서 다음을 수행합니다.

window["pass_function"]();

물론 다음 매개 변수를 전달할 수 있습니다.

//react
window["passp"]("react ts");

//js
function passp(someval) {
  alert(`passes parameter: ${someval}`);
}

따라서 글로벌 스코프(일명 창)에서 메서드를 정의합니다.리액션이 되든 안 되든 어떤 방법으로든 사용할 수 있습니다.

또는 모듈 기반 패러다임으로 전환하고 require/import를 사용하여 모듈을 가져와 함수를 사용할 수 있습니다.

대규모 프로젝트에서는 확장성이 뛰어나기 때문에 후자의 것이 좋습니다.데모나 POC가 필요한 경우는, 확실히 글로벌한 범위에 모든 것을 접속할 수 있습니다.

모듈에 대한 자세한 내용은http://http://exploringjs.com/es6/ch_modules.html 를 참조해 주세요.

메서드를 글로벌창 오브젝트에 첨부하여 컴포넌트에서 사용할 수 있습니다.

<button onClick={this.howItWorks} type="button" className='btn'>How it Works</button>

howItWorks = () => {
  window.HowItWorksVideo();
}

타이프스크립트 유저의 경우는, 다음과 같이 시험해 주세요.

declare global {
    interface Window {
        externalMethod: (params: any) => void;
    }
}

반응 컴포넌트에서는 이렇게 부를 수 있습니다.

window.externalMethod(params)

언급URL : https://stackoverflow.com/questions/35082047/call-external-javascript-function-from-react-components