我有内置Switch组件的组件.整个组件是可点击的.当您单击此组件时,它会触发dispatch(修改redux store)并导致重新呈现此组件.
我需要的是不重新渲染整个组件,只是为了将Switch组件设置为正确的状态.
我需要的是不重新渲染整个组件,只是为了将Switch组件设置为正确的状态.
像这样的东西
<TouchableOpacity onPress={onPress}> <Text>{this.props.title}</Text> <Switch value={this.state.active}/> </TouchableOpacity>
任何的想法?
我发现这个非常常见的用例,我知道我会遇到很多类似的情况,所以我需要这种行为,但我在网上找不到任何示例或解决方案.也许我只是缺少一些东西.
谢谢
—编辑—
我也尝试过这个.我尝试使用shouldComponentUpdate禁用更新,我尝试仅在willRecieveProps中设置状态和/或切换,即使没有切换.我也试过玩LayoutAnimation.但没有任何作用. this.setState()只是不为Switch组件设置动画.
我也尝试过使用this._switch._rctSwitch.setNativeProps({value:nextProps.active}),但这也不起作用(因为_rctSwitch而闻起来).
class ViewWithSwitchInside extends React.Component { constructor(props) { super(props) this.toggle = this.toggle.bind(this); this.state = { active: props.active } } componentWillReceiveProps(nextProps) { if (this.state.active != nextProps.active) { this.setState({ active: nextProps.active }) } } toggle() { let newValue = !this.state.active this.setState({ active: newValue,}) if (typeof this.props.onClick === 'function') { this.props.onClick(newValue) } } render() { return ( <TouchableWithoutFeedback onPress={this.toggle}> <View> <Text>{this.props.title}</Text> <Switch value={this.state.active} /> </View> </TouchableWithoutFeedback> ) } }
解决方法
您不能只从父组件中渲染一个子项.即使您以某种方式能够更改Switch所依赖的变量的值,除非您重新渲染父组件,否则它将不会显示.
我试图使用全局变量来设置切换器的值,我也阻止使用shouldComponentUpdate()重新呈现父组件,您可以在here上阅读更多内容
这是我的结果:
这是我的应用程序的初始状态.该全局变量设置为false,并且已经呈现了父组件.
现在我通过点击Switch周围的View来更改全局变量为true
但是没有任何东西在视觉上改变,只有变量改变了,而不是改变者.
然后我按下屏幕底部的“重新渲染”文本来更改状态(对Switch组件的无关更改),这种情况发生了:
这是上面App的代码:
var isActive = false; //global variable class Test extends Component { constructor(props) { super(props); this.state={active:false,irrelevantState: true}; } test(foo){ console.log("Attempting to change",foo); isActive = foo; } shouldComponentUpdate(nextProps,nextState){ if(this.state.active != nextState.active){//If the new state is different than the previous,stop rendering. this.test(nextState.active); return false; }else { //else,re-render everything return true; } } render(){ console.log("Test re-render"); return( <View style={{flex:1}}> <TouchableOpacity onPress={()=>{this.setState({active:!this.state.active})}} style={{flex:1,marginTop:20}}> <Text>Test Component</Text> <Switch value={isActive}/> </TouchableOpacity> <TouchableOpacity onPress={()=>{this.setState({active:true})}} style={{flex:1,marginTop:20}}> <Text>Test Component</Text> <Switch value={isActive}/> </TouchableOpacity> <TouchableOpacity style={{height:20}} onPress={()=>this.setState({irrelevantState:false})}> <Text> Re-render</Text> </TouchableOpacity> </View> ) } }
最好的办法是找到一种智能的方法来重新渲染,只有当你的应用程序的this.state.active和其他所需状态发生变化时,忽略其他变化.