Question

我有一个令人困惑的问题，我无法弄清楚。我是新来的反应+助焊剂+反应路由器。

我有以下路线：

<Router history={browserHistory} >
    <Route path="/" component={App}>
        <IndexRoute component={Search}/>
        <Route path="/login" component={Login} />
        <Route name="client" path="/client(/:clientid)" component={Client}/>
        {/* <Route name="tel" path="/tel/:telid" component={Tel}/>*/}
    </Route>
</Router>

我希望能够将特定的参数传递给特定路线。我知道我可以使用以下方法将所有参数传递到所有路线：

{this.props.children && React.cloneElement(this.props.children, {...})}

但是我不想让子组件访问其他组件状态。理想情况下，我想将loginState传递给login组件，searchState传递给搜索组件，clientState传递给客户端组件。使用上述方法，客户端组件可以访问所有组件状态。

我目前有这种解决方法，但它感觉很脏，不太适合未来：

var React = require('react');

var AppStore = require('../stores/AppStore');

var browserHistory = require('react-router').browserHistory;

// Flux cart view
var App = React.createClass({

    getInitialState() {
        return AppStore.getState();
    },

    componentWillMount() {
        if (!this.state.auth.loggedIn) {
            browserHistory.push('/login');
        }
    },
    // Add change listeners to stores
    componentDidMount() {
        AppStore.addChangeListener(this._onChange);
    },

    // Remove change listers from stores
    componentWillUnmount() {
        AppStore.removeChangeListener(this._onChange);
    },

    // Method to setState based upon Store changes
    _onChange(){
        this.setState(AppStore.getState());
    },

  // Render cart view
  render() {
    console.log(this.props.children);
    var name = this.props.children.type.displayName;
    var p;
    switch(name) {
        case 'client':
            p = {clientState: 'test'}
        break;
        case 'login':
            p = {auth: this.state.auth}
        break;
    }
    return (
        <div>
            {this.props.children && React.cloneElement(this.props.children, p)}
        </div>
    );
  }

});

module.exports = App;

有关如何正确实现此目的的任何想法？我查看了很多谷歌搜索结果，但大多数人都回想起旧版本的react和react-router。

Answer 1

您可以使用named components

...     
<Route path="/login" components={{login:Login}} />
<Route path="/client(/:clientid)" components={{client:Client}}/>
...

在App组件中

class App extends Component {
    constructor(props){
        super(props);
        this.setProps= this.setProps.bind(this);
    }
    setProps(comp, props){
        if(!comp) return null;
        return React.cloneElement(comp, props);
    }
    render(){
        const {client, login}=this.props;
        const {clientData, loginData}=this.state;

        return (<div>
            {this.setProps(client,clientData)}
            {this.setProps(login,loginData)}
        </div>);
    }
}

export default App;

当页面上每个路径多于一个组件

时，它也很有用

React路由器将特定参数传递给子竞争对手

1 个答案: