import { browserHistory } from 'react-router';
...
handleClick(){
  doSomething();
  browserHistory.push('/some/path');
}

我们有3个组成部分：

> App.js – 包含组件1和组件2
> Component1.js – 没有包裹在路线中并且将始终被渲染,但是这将没有“路径道具”的引用 – (历史,位置,匹配……)
> Component2.js – 仅在路线位置匹配时呈现.需要注意的是,此组件将使用“路径道具”进行渲染

要以编程方式导航,可以使用react-router history对象.

this.props.history.push( ‘路径’);

对于通过Route呈现的组件,这将立即起作用,因为这些组件已经可以访问路径道具(历史).在我们的示例中,这是Component2.但是,对于未通过Route(例如Component1)呈现的组件,您需要将其包装在withRouter中,以便您访问历史对象.

App.js

import React,{ Component } from 'react';
import { browserRouter,Route } from 'react-router-dom';

import Component1 from './Component1';
import Component2 from './Component2';

class App extends Component {
  render() {
    return (
      <browserRouter>
        <div>
          <Component1 />
          <Route path="/render1" render={() => <div>Rendered from Component1</div>} />
          <Route path="/" component={Component2} />
          <Route path="/render2" render={() => <div>Rendered from Component2</div>} />
        </div>
      </browserRouter>
    )
  }
}

export default App;

Component1.js

import React from 'react';
import { withRouter } from 'react-router';

class Component1 extends React.Component {

  handleButtonClick() {
    this.props.history.push('/render1');
  }

  render() {
    return (
      <div>
        <h1>Component 1</h1>
        <button onClick={this.handleButtonClick.bind(this)}>Component 1 Button</button>
      </div>
    );
  }
}

const Component1WithRouter = withRouter(Component1);
export default Component1WithRouter;

对于Component1,我们将它包装在withRouter中,然后导出返回的包装对象.有些人注意到,在App.js中,我们仍然将其引用为Component1而不是Component1WithRouter

Component2.js

import React from 'react';

class Component2 extends React.Component {

  handleButtonClick() {
    this.props.history.push('/render2');
  }

  render() {
    return (
      <div>
        <h1>Component 2</h1>
        <button onClick={this.handleButtonClick.bind(this)}>Component 2 Button</button>
      </div>
    );
  }
}

export default Component2;

对于Component2,历史对象已经可以从this.props获得.你只需要调用push函数.

像这样的东西

<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>
        )
    }
}

我试图使用全局变量来设置切换器的值,我也阻止使用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和其他所需状态发生变化时,忽略其他变化.