javascript - প্রতিক্রিয়া রাউটার-হ্যান্ডলার উপাদান props পাস




properties reactjs (14)

আমার প্রতিক্রিয়া রাউটার ব্যবহার করে আমার React.js অ্যাপ্লিকেশনটির জন্য নিম্নলিখিত কাঠামো আছে:

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

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

আমি Comments উপাদান মধ্যে কিছু বৈশিষ্ট্য পাস করতে চান।

(সাধারণত আমি এই মত করব <Comments myprop="value" /> )

প্রতিক্রিয়া রাউটার সঙ্গে তাই করার সবচেয়ে সহজ এবং সঠিক উপায় কি?


প্রতিক্রিয়া-রাউটার v4 আলফা

আগের পদ্ধতিতে খুব অনুরূপ যদিও, এটি করার জন্য এখন একটি নতুন উপায় আছে।

import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';

const route = {
    exactly: true,
    pattern: '/',
    title: `${siteTitle} - homepage`,
    component: Homepage
  }

<Match { ...route } render={(props) => <route.component {...props} />} />

PS এটি শুধুমাত্র আলফা সংস্করণে কাজ করে এবং V4 আলফা রিলিজের পরে সরানো হয়েছে। V4 সর্বশেষ, আবার এবং পাথ এবং সঠিক props সঙ্গে।

react-lego একটি উদাহরণ অ্যাপ্লিকেশানটি এমন কোড ধারণ করে যা ঠিকভাবে এটি routes.js এ তার প্রতিক্রিয়া-রাউটার -4 শাখায় করে


1.0 এবং 2.0 এ আপনি createElement prop ব্যবহার করতে পারেন createElement আপনার লক্ষ্য উপাদানটি createElement তৈরি করতে পারে তা নির্দিষ্ট করতে। ডকুমেন্টেশন উৎস

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

আপনি <RouteHandler> (v0.13.x তে) বা রুট উপাদানটি v1.0 এ পাস করে <RouteHandler> পাস করতে পারেন;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

( https://github.com/rackt/react-router/releases/tag/v1.0.0 এ আপগ্রেড গাইড থেকে)

সমস্ত সন্তানের হ্যান্ডলগুলি props একই সেট পাবেন - এই পরিস্থিতিতে বা নির্ভর করে না দরকারী হতে পারে।


আপনি <RouterHandler/> মাধ্যমে <RouterHandler/> পাস করতে পারেন:

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

var Index = React.createClass({
  render: function () {
    var props = this.props; // or possibly this.state
    return (
        <div>
            <header>Some header</header>
            <RouteHandler {...props} />
        </div>
    );
  }
});

এর নেতিবাচক দিকটি আপনি নির্বিচারে props পাস করা হয়। সুতরাং Comments আপনার রুট কনফিগারেশনের উপর নির্ভর করে একটি ভিন্ন উপাদানটির জন্য অভিপ্রেত হয় এমন প্রস্তাবগুলি গ্রহণ করতে পারে। props অপরিবর্তনীয় হওয়ার পরে এটি একটি বিশাল চুক্তি নয়, তবে দুটি পৃথক উপাদানগুলি foo নামক একটি প্রোপের প্রত্যাশা করে তবে বিভিন্ন মানগুলির সাথে এটি সমস্যাযুক্ত হতে পারে।


আপনি যদি র্যাপার লিখতে না চান, তবে অনুমান করুন আপনি এটি করতে পারেন:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

আপনি র্যাপার উপাদানটি এড়াতে রাউথহ্যান্ডলার মেশিন ব্যবহার করতে পারেন এবং পিতামাতার রাষ্ট্রটিকে আরও সহজেই পাসপোর্ট হিসাবে পাস করতে পারেন:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var RouteHandler = require('react-router/modules/mixins/RouteHandler');

var Index = React.createClass({
      mixins: [RouteHandler],
      render: function () {
        var handler = this.getRouteHandler({ myProp: 'value'});
        return (
            <div>
                <header>Some header</header>
                {handler}
           </div>
        );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

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

একটি কাস্টম রুট উপাদান ব্যবহার করে, এই সম্ভব রাউটার v3 সম্ভব।

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var routes = (
  <Route path="/" handler={Index}>
    <MyRoute myprop="value" path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

<MyRoute> উপাদান কোডের জন্য, এটি এমন কিছু হওয়া উচিত:

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

const MyRoute = () => <div>&lt;MyRoute&gt; elements are for configuration only and should not be rendered</div>;

MyRoute.createRouteFromReactElement = (element, parentRoute) => {
    const { path, myprop } = element.props;
    // dynamically add crud route
    const myRoute = createRoutesFromReactChildren(
        <Route path={path} />,
        parentRoute
    )[0];
    // higher-order component to pass myprop as resource to components
    myRoute.component = ({ children }) => (
        <div>
            {React.Children.map(children, child => React.cloneElement(child, { myprop }))}
        </div>
    );
    return myRoute;
};

export default MyRoute;

কাস্টম রুট কম্পোনেন্ট পদ্ধতি সম্পর্কে আরও বিস্তারিত জানার জন্য, বিষয়টিতে আমার ব্লগ পোস্টটি দেখুন: http://marmelab.com/blog/2016/09/20/custom-react-router-component.html


একটি stateless ফাংশন উপাদান সঙ্গে এটি মোড়ানো:

<Router>
  <Route 
    path='/' 
    component={({children}) => 
      <MyComponent myProp={'myVal'}>{children}</MyComponent/>
    }/>
</Router>

কুকি হ্যান্ডলারের সাথে প্রতিক্রিয়া-রাউটার-ডোম ব্যবহার করার জন্য এটি সম্ভবত সর্বোত্তম উপায়

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(
    <Switch>
        <Route path="/login" component={Login} />
        <RouteWithLayout path="/dummy" layout={DummyLayout} component={DummyPage} 
        {...props}/>
        <Redirect from="/*" to="/login" />
    </Switch>
  )
}

এবং একটি কুকি চেক ব্যবহার করুন

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 <Redirect to="/login"/>
        return (
        <Route {...rest} render={(props) =>
            createElement(layout, {...props, ...rest}, createElement(component, 
      {...props, ...rest}))
       }
      />
    )
}

গ্রহনযোগ্য প্রতিক্রিয়ার মধ্যে মন্তব্য দ্বারা মন্তব্য থেকে অনুলিপি করা হচ্ছে:

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

এই আমার মতে সবচেয়ে আনন্দদায়ক সমাধান। এটা কাজ করে। আমাকে সাহায্য করে ছিল.


প্রতিক্রিয়া রাউটার 2.5.2 জন্য, সমাধানটি এত সহজ:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

প্রতিক্রিয়া রাউটার 2.x জন্য।

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

এবং আপনার রুট ...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

নিশ্চিত করুন যে তৃতীয় প্যারামিটারটি একটি বস্তুর মতো: { checked: false }


রে্যাক্ট রাউটারের সমস্যাটি হল এটি আপনার উপাদানগুলিকে রেন্ডার করে এবং তাই আপনাকে প্রপ্সগুলিতে পাস করা বন্ধ করে দেয়। অন্যদিকে, ন্যাভিগেশন রাউটার আপনাকে আপনার নিজস্ব উপাদানগুলি সরবরাহ করতে দেয়। এর মানে হল আপনি নিম্নলিখিত কোড হিসাবে এবং JsFiddle শো সহ props পাস করতে কোন hoops মাধ্যমে লাফ দিতে হবে না।

var Comments = ({myProp}) => <div>{myProp}</div>;

var stateNavigator = new Navigation.StateNavigator([
  {key:'comments', route:''}
]);

stateNavigator.states.comments.navigated = function(data) {
  ReactDOM.render(
    <Comments myProp="value" />,
    document.getElementById('content')
  );
}

stateNavigator.start();

শুধু ColCh এর উত্তর একটি ফলো আপ। এটি একটি উপাদান মোড়ানো বিমূর্ত অবিকল সহজ:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

আমি এখনো এই সমাধান পরীক্ষিত না তাই কোন মতামত গুরুত্বপূর্ণ।

উল্লেখ্য যে এই পদ্ধতির সাথে রাউটার (যেমন প্যারামস) মাধ্যমে পাঠানো কোনও প্রপোপার ওভাররাইট / সরানো হয়।





react-router