javascript react-router-dom - react-router - تمرير الدعائم إلى مكون معالج




10 Answers

UPDATE منذ الإصدار الجديد ، من الممكن تمرير الدعائم مباشرة عبر مكون Route ، دون استخدام التفاف

على سبيل المثال ، باستخدام render دعم. رابط لرد الموجه: https://reacttraining.com/react-router/web/api/Route/render-func

مثال التعليمة البرمجية في codesandbox: https://codesandbox.io/s/z3ovqpmp44

مكون

    class Greeting extends React.Component {
        render() {
            const { text, match: { params } } = this.props;

            const { name } = params;

            return (
                <React.Fragment>
                    <h1>Greeting page</h1>
                    <p>
                        {text} {name}
                    </p>
                </React.Fragment>
            );
        }
    }

والاستخدام

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

نسخة قديمة

الطريقة المفضلة هي التفاف مكون Comments وتمرير الغلاف كمعالج توجيه.

هذا هو مثالك مع تطبيق التغييرات:

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

var CommentsWrapper = React.createClass({
  render: function () {
    return (
        <Comments myprop="myvalue" />
    );
  }
});

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

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

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

لدي البنية التالية لتطبيق React.js الخاص بي باستخدام React Router :

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" /> )

ما هي الطريقة الأسهل والأسهل للقيام بذلك مع React Router؟




نسخ من التعليقات من قبل Ciantic في الاستجابة المقبولة:

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

هذا هو الحل الأكثر روعة في رأيي. إنها تعمل. لقد ساعدني.




مجرد متابعة لجواب 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})}/>

لم أختبر هذا الحل حتى الآن لذا فإن أي ملاحظات مهمة.

من المهم ملاحظة أنه باستخدام هذه الطريقة ، تتم الكتابة / الإزالة فوق أية دعائم مرسلة عبر جهاز التوجيه (مثل المعلمات).




باستخدام ES6 ، يمكنك فقط جعل الأغلفة المضمنة المكونة:

<Route path="/" component={() => <App myProp={someValue}/>} >

إذا كنت بحاجة إلى تمرير الأطفال:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >




إليك الحل الأنظف الذي أتيت به (React Router v4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponent لا يزال لديه props.match و props.location ، ويحتوي على props.foo === "lol" .




يمكنك أيضًا استخدام MixHandler Mixin لتجنب مكون المجمّع وبسهولة أكبر تمرير حالة الوالد كدعامات:

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



في 1.0 و 2.0 ، يمكنك استخدام createElement prop من Router لتحديد كيفية إنشاء عنصر الهدف الخاص بك بالضبط. مصدر التوثيق

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

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



لتوجيه جهاز التوجيه 2.x.

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

وفي الطرق الخاصة بك ...

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

تأكد من أن المعلمة الثالثة هي كائن مثل: { checked: false } .




تكمن المشكلة في React Router في أنه يجعل المكونات الخاصة بك وبالتالي توقفك عن المرور في الدعائم. من ناحية أخرى ، يتيح لك موجِّه التوجيه عرض المكونات الخاصة بك. هذا يعني أنك لا تحتاج إلى القفز من خلال أي الأطواق لتمريرها في الدعائم على النحو التالي JsFiddle المصاحبة.

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();



بالنسبة لموجه الاستجابة 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'})}
  )
}
...



Related

javascript properties reactjs react-router