重新构建异步道具更新

时间:2018-06-06 14:05:34

标签: javascript reactjs recompose

当从视图组件外部更改prop时,如何使用重构重新渲染组件?

const Message = ({msg}) => <div>The prop has a value of <b>{msg}</b>.</div>

const App = Recompose.withProps(() => {
  let msg = 'One'

  // this async update doesn't work because nothing triggers a rerender
  setTimeout(() => {msg = 'Two'}, 500)

  return {msg}
})(Message)


ReactDOM.render(<App/>, document.getElementById('app'))

渲染此组件时,它会将值显示为一个,但在500毫秒后不会更改为两个,即使它更改了道具。

setTimeout这里简化了在实际用例中我订阅websocket服务器的情况,并且当推送消息时,Message组件会更新。

1 个答案:

答案 0 :(得分:1)

免责声明:我没有主动重组。

但我所知道的是你的组件应该是有状态的。我找到了withState in recompose docs

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

所以我认为,您需要使用msg定义状态withState,然后您可以将setMsg传递到您的组件中。在setMsg内调用此setTimeout时,应执行更新。

const withMsg = withState('msg', 'setMessage', '');