Question

我想将我的应用入口点用作全局状态商店。将信息传递给儿童作为道具。

使用react-router 4，如何将prop数据向下发送到渲染的组件。与此类似：

Parser_(parser, funcs, atn, sempredFuncs, ctor, superClass) ::= <<    

// funcs beinhaltet die Klasse und dann die Funktion

class <parser.name> extends <if(superClass)><superClass><else>\antlr4\php7_runtime\Parser<endif>    {

    public $grammarFileName = "<parser.grammarFileName>";
    public $atn = null;
    public $decisionsToDFA = array( );
    public $sharedContextCache = null;


    public $literalNames = [ <parser.literalNames:{t | <t>}; null="'\<INVALID>'", separator=", ", wrap, anchor> ];

    public $symbolicNames = [ <parser.symbolicNames:{t | <t>}; null="'\<INVALID>'", separator=", ", wrap, anchor> ];

    <parser.rules:{r | const RULE_<r.name> = <r.index>;}; separator="\n", wrap, anchor>

    public $ruleNames =  [ <parser.ruleNames:{r | "<r>"}; separator=", ", wrap, anchor> ];

    public $EOF = <PathRuntime()><TokenLabelType()>::EOF;

    <if(parser.tokens)>
    <parser.tokens:{k | const <k>=<parser.tokens.(k)>;}; separator="\n", wrap, anchor>
    <endif>    

    <atn>    

    <parser:(ctor)()>

    <namedActions.members>

// funcs -- Start
    <funcs; separator="\n">
// funcs -- Ende        

} // class <parser.name>    



<if(sempredFuncs)>
    function sempred( $localctx, int $ruleIndex, int $predIndex){
        if ($this->_predicates == null) {
            $this->_predicates = py_dict();
        }
<parser.sempredFuncs.values:{ f |
        $this->predicates[<f.ruleIndex>] = $this-><f.name>_sempred}; separator="\n">
        $pred = $this->_predicates->get($ruleIndex, null);
        if ( $pred == null) {
            throw Exception("No predicate with index:" . (string) $ruleIndex );
        } else {
            return pred( $localctx, $predIndex)
        }


    <sempredFuncs.values; separator="\n">
    }
<endif>

>>

我见过旧版本的react-router的一些混乱的解决方法，似乎已被弃用。

在v4中执行此操作的正确方法是什么？

Answer 1

您可以将函数传递给渲染道具，而不是将组件直接传递给组件道具。

<Route path="/someplace" render={() => <SomeComponent props={} />} />

您可以阅读更多here。

Answer 2

要添加上述答案，如果您希望组件可以访问路由属性，则需要包含这些属性。现在，当路由器激活＆＃34; SomeComponent＆＃34;时，组件将获得所有路由道具和额外的参数 - 在此示例中＆＃34; param＆＃34;。

<Route path='/someplace' component={(props) => <SomeComponent param="yo" {...props}/>} />

Answer 3

从技术上讲，有两种方法可以实现。

第一个（不是最有效的）是将内联函数传递给组件prop：

<Route 
  path=“/someplace” 
  component={(props) => (
    <SomeComponent {...props} extra-prop-data={ dataPassedToSomeComponent } />
  ) />

第二个是最好的解决方案。为了防止像第一个示例那样在每个渲染上创建新组件，我们将相同的内联函数传递给渲染道具，但这一次：

<Route 
  path=“/someplace” 
  render={(props) => (
    <SomeComponent {...props} extra-prop-data={ dataPassedToSomeComponent } />
  ) />

如何将props传递给react-router 4组件？

3 个答案: