使用rxjs更新反应功能无状态组件的道具

时间:2016-12-26 21:44:33

标签: reactjs functional-programming observable rxjs5 stateless

我以为我可以使用一个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每秒都会更改道具,每次都会创建一个新的道具对象。这不足以强制重新渲染组件吗?

1 个答案:

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