외부 구성 요소 속성을 업데이트하십시오.

Question

React 주위에 머리를 감싸려고합니다. 내 요구 사항은 두 가지 구성 요소를 갖는 것인데 두 구성 요소는 모두 서로 다른 두 가지 방식으로 동일한 JSON 데이터를 표시합니다. Web API 2 메서드를 호출하여 JSON 결과를 반환 한 다음 데이터를 보유하는 변수가 변경되는 즉시 구성 요소를 다시 렌더링합니다. 이 두 구성 요소는 동일한 데이터를 반영해야하기 때문에 $.ajax 호출을 두 번 만들고 싶지 않습니다. 나는이 과정의 일부분을 시뮬레이션하기 위해 작은 테스트 구성 요소를 만들었고 그것을 이해할 수 없다.

나는 다음과 같은 jsx 코드가 : 직접 두 TestComponent.setProps({data: Data});를 사용하여 내가 시도했던 setInterval 방법에서

var Data = {text: "Some Text..."}; 

    var TestComponent = React.createClass({ 
    render: function() { 
    return (
     <div className="testComponent"> 
     Hello, world! I am a TestComponent. {this.props.data.text} 
     </div> 
    ); 
    }, 
    updateData: function() { 
    this.setProps({data: Data}); 
    } 
}); 
React.renderComponent(
    <TestComponent data={Data} />, 
    document.getElementById('content') 
); 

setInterval(function() { 
       Data = {text: "Some other text..."}; 

      }, 1000); 

를 또한 내가 undefined 오류가 모두 TestComponent.updateData();를 호출했습니다. 나는 또한 React.TestComponent.을 시도했으며 이것은 undefined입니다.

이 간단한 사용 사례라고 생각하지만, 어디서나이 예제를 찾을 수 없습니다. 이 작업에 대해 많은 이야기가 있지만 코드 샘플은 없습니다. 어쩌면 나는이 모든 잘못에 대해 갈거야?

Answer 1

TestComponent 클래스의 메서드를 호출하려고합니다. 대신 React.renderComponent이 반환 한 인스턴스를 사용해야합니다. 이런 식으로 뭔가가 작동합니다 : 도움이

function renderTest(data) { 
    React.renderComponent(
    <TestComponent data={data} />, 
    document.getElementById('content') 
); 
} 

renderTest({text: "Some Text..."}); 
setInterval(function() { 
    renderTest({text: "Some other text..."}); 
}, 1000); 

희망 :

선호하지만

var component = React.renderComponent(
    <TestComponent data={Data} />, 
    document.getElementById('content') 
); 

setInterval(function() { 
    Data = {text: "Some other text..."}; 
    component.setProps({data: Data}); 
}, 1000); 

간단히과 같이, 동일한 노드에서 다시 renderComponent를 호출 더 선언적 접근 방법이다.