我以为我可以使用一个observable每秒发送一个新的道具并且有一个反应(功能,无状态)组件从而更新自己。我不确定我在这里缺少什么。这是一个Postgres permissions overview
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'))
Observable每秒都会更改道具,每次都会创建一个新的道具对象。这不足以强制重新渲染组件吗?
答案 0 :(得分:1)
功能正常的React组件只是一个函数。它不是“观察”它自己的变化道具。上游的东西必须调用你的函数来获得新的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'))
})