mit rxjs zu aktualisieren Requisiten einer reagierenden funktionalen zustandslosen Komponente

Question

Ich dachte, ich könnte eine Observable verwenden, um neue Requisiten jede Sekunde zu senden und eine reagierende (funktionale, zustandslose) Komponente dabei selbst aktualisieren. Ich bin mir nicht sicher, was ich hier vermisse. Hier ist eine 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')) 

die beobachtbaren Veränderungen Requisiten jede Sekunde, jedes Mal zu schaffen Objekt ein neues Requisit. Sollte das nicht ausreichen, um eine erneute Wiedergabe der Komponente zu erzwingen?

Answer 1

Eine funktionale React-Komponente ist nur das .. eine Funktion. Es "beobachtet" nicht seine eigenen Requisiten für Veränderungen. Etwas Upstream muss deine Funktion aufrufen, um neues JSX zu erhalten. Wenn Sie eine einschließende Komponente haben, die React.Component erweitert, dann können Sie setState anrufen und neue Requisiten übergeben, oder in Ihrem Fall rufen Sie einfach ReactDOM.render mit Ihrer aktualisierten JSX.

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')) 
})