当从视图组件外部更改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组件会更新。
答案 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', '');