React-router - props an Handler-Komponente übergeben

Question

Ich habe die folgende Struktur für meine React.js-Anwendung mit React Router:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (

            Ein Header

    );
  }
});

var routes = (

);

ReactRouter.run(routes, function (Handler) {
  React.render(, document.body);
});

Ich möchte einige Eigenschaften an das Comments-Komponente übergeben.

(normalerweise würde ich das so machen )

Was ist der einfachste und richtige Weg, dies mit React Router zu tun?

Answer 1

Für den react-router 2.5.2 ist die Lösung so einfach:

    //someConponent
...
render:function(){
  return (
    Dies ist das übergeordnete Element, das das Prop an this.props.children übergibt
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

Answer 2

Mit einem benutzerdefinierten Routenkomponenten ist dies in React Router v3 möglich.

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (

);

Was den Komponentencode betrifft, sollte es etwas wie folgt aussehen:

import React from 'react';
import { Route } from 'react-router';
import { createRoutesFromReactChildren } from 'react-router/lib//RouteUtils';

const MyRoute = () => <MyRoute>-Elemente sind nur für die Konfiguration gedacht und sollten nicht gerendert werden;

MyRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, myprop } = element.props;
    // dynamisch CRUD-Route hinzufügen
    const myRoute = createRoutesFromReactChildren(
        ,
        parentRoute
    )[0];
    // Higher-Order-Komponente zum Übergeben von myprop als Ressource an Komponenten
    myRoute.component = ({ children }) => (

            {React.Children.map(children, child => React.cloneElement(child, { myprop }))}

    );
    return myRoute;
};

export default MyRoute;

Für weitere Details zur benutzerdefinierten Routenkomponenten-Ansatz, schauen Sie sich meinen Blog-Beitrag zum Thema an: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html

Answer 3

Das ist wahrscheinlich der beste Weg, react-router-dom mit einem Cookie-Handler zu verwenden

in index.js

import React, { Component } from 'react'
import {Switch,Route,Redirect} from "react-router-dom"
import {RouteWithLayout} from "./cookieCheck"

import Login from "../app/pages/login"
import DummyLayout from "../app/layouts/dummy"
import DummyPage from "../app/pages/dummy" 

export default ({props})=>{
return(

  )
}

und verwenden Sie einen cookieCheck

import React , {createElement} from 'react'
import {Route,Redirect} from "react-router-dom"
import {COOKIE,getCookie} from "../services/"

export const RouteWithLayout = ({layout,component,...rest})=>{
    if(getCookie(COOKIE)==null)return 
        return (

            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      />
    )
}

Answer 4

class App extends Component {
  constructor(props){
    super(props);

    this.state = {
      data:null
    }

  }
 componentDidMount(){
   database.ref().on('value', (snapshot) =>{
     this.setState({
       data : snapshot.val()
      })
   });
 }

  render(){
  //  const { data } = this.state
  return (

         } />

  );
  }
};

export default App;

Answer 5

Verwenden Sie die Lösung wie unten und dies funktioniert in v3.2.5.

 (

  )}
/>

oder