rxjs를 사용하여 반응 기능이있는 상태 비 저장 구성 요소의 소품을 업데이트하는 방법

Question

나는 새로운 소품을 매초 보내고 반응 (기능적, 상태없는) 구성 요소를 통해 자체를 업데이트 할 수있는 관찰 가능 기능을 사용할 수 있다고 생각했습니다. 내가 여기서 무엇을 놓치고 있는지 잘 모르겠습니다. 여기에 jsbin

const propsObs = Rx.Observable.from(['Butler', 'Fritz', 'Dusty', 'Petey']) 
const inte = Rx.Observable.interval(1000).take(4) 
var props={olddog:'Rusty'} 
const propsOverTime = propsObs.zip(inte, (aprop,intx)=>aprop) 
propsOverTime.subscribe((x)=>{ 
    props={...props, olddog:x} 
    console.log(props) 
}) 

const App = (props) =>{ 
    console.log(props.olddog) 
    const getDog=()=>props.olddog 
    const thedog = getDog() 
    return(
    <div><h4>hello {thedog}</h4></div>) 
} 
ReactDOM.render(<App {...props}/>, document.getElementById('app')) 

관찰 변화는 새로운 소품 객체를 생성 매 초마다 소품입니다. 구성 요소를 다시 렌더링하도록 강제하는 데 충분하지 않아야합니까?

Answer 1

기능적 성분은 바로 기능입니다. 변화를위한 소품을 "지켜 보는"것이 아닙니다. 업스트림 뭔가 새로운 JSX를 얻으려면 함수를 호출해야합니다. React.Component을 확장하는 동봉 된 구성 요소가있는 경우 setState으로 전화하여 새 소품을 전달하거나, 귀하의 경우 업데이트 된 JSX로 ReactDOM.render으로 전화하십시오.

const App = props => { 
    const getDog =() => props.olddog 
    const thedog = getDog() 
    return(
    <div><h4>hello {thedog}</h4></div> 
) 
} 

propsOverTime.subscribe(x => { 
    props = {...props, olddog: x} 
    ReactDOM.render(<App {...props}/>, document.getElementById('app')) 
})