Ajax 성공시 reactjs 구성 요소 탑재

Question

jquery를 사용하여 부트 스트랩 모달 본문에 반응 구성 요소를 탑재하고 성공적인 Ajax 요청 후에 모달을 열려고하는데로드 할 반응 구성 요소를 얻을 수없는 것 같습니다. 이것은 내가 지금까지 가지고있는 것입니다 :

성공 후 assignModal 함수를 호출합니다. 부모 반응 컴포넌트 안에 있습니다. 둘 다 jQuery를 사용하여 DOM을 조작에 반응하려고하면 여기

assignModal: function(){ 
$('.assign-modal-body').html(<Cortex.VulnerabilityList.AssignModal parent={this}/>); 
$("#vuln-assign-modal").modal('show');} 

그리고는 반응 구성 요소 내 경험에서

Cortex.VulnerabilityList.AssignModal = React.createClass({ 
componentDidMount: function() { 
console.log("Component mounted") 
}, 

render: function() { 
    return (
    <h1>Hello</h1> 
) 
} 
}); 

Answer 1

, 당신은 문제가있는 것입니다. 모든 옵션이있는 경우 jQuery를 제거하고 React의 선언적 프로그래밍 패러다임을 완전히 포용하십시오.

하지만 jQuery 위젯을 사용하고 싶을 수도 있습니다. 이 경우 jQuery가 React 트리 내에서 DOM에 쓰지 않는 방식으로 애플리케이션을 설계하고 설계하십시오.

그래서 몇 가지 옵션 :

1. 사용 jQuery를하고 반작용하지만 별도로 - 어떤 루트 <div>에서 내려 응용 프로그램을 사용자의 반응과 형제 <div>에 모달이 되세요. 그런 다음 jQuery와 일반 HTML을 사용하여 React를 사용하지 않고 모달을 렌더링합니다.
2. jQuery 사용을 중지하십시오. - 반응을 사용하여 모달을 관리하십시오. 따라서 DOM 요소의 innerHTML을 jQuery로 설정하여 assignModal에 응답하는 대신 일부 글로벌 상태를 showModal = true으로 설정하고 모달 if (!showModal) return null 또는 그와 유사한 메소드의 렌더링 방법으로 설정하면됩니다. 이 부분은 최근에 wrote a post입니다.