javascript - 反应 this.props.title 为空！！为什么？

Question

我有 3 个状态（状态、头衔、舞蹈）

我使用 react-router、react-switch、React.cloneElement。

应用程序.jsx

   var React = require('react');
    var io = require('socket.io-client');
    var Router = require('react-router');
    var RouteHandler = require('react-router').RouteHandlerl;
    var Header = require('./parts/Header');
    module.exports =  class App extends React.Component {
      constructor(){
        super();

        this.state = {
          status: 'disconnected',
          title:'no Tile',
          dance: 'dance'
      };
      }

        render() {
              return (
                <div>
                  <Header title={this.state.title} status={this.state.status }  />
                  {React.cloneElement(this.props.children,this.state)} 
                  </div>
              );
            }
          }

并想在 Audience 中花费 state(title)！

问题是 this.props.title 为 null为什么？必须 this.props.title == 'no Tile'

观众.jsx

var React = require('react');

    module.exports =  class Audience extends React.Component {

        render(){// this.props.title is null ???
            return (<h1>Audience : {this.props.title}</h1>);
        }
    }

在应用程序客户端中运行

应用程序客户端.jsx

  var React = require('react');
    var Router = require('react-router-dom');
    var BrowserRouter = require('react-router-dom').BrowserRouter;
    var Route = require('react-router-dom').Route;
    var Switch = require('react-router-dom').Switch;
    var ReactDOM = require("react-dom");
    var App = require("./components/APP");
    var Audience = require("./components/Audience");


     class Run extends React.Component {

        render(){
            return( 
            <BrowserRouter  >
                <Switch title={this.props.title} > 
                    <Route  path="/" component={Audience}   title={this.props.title} />

               </Switch>
           </BrowserRouter>
           );
        }
    }


        ReactDOM.render( 
       <App >
            <Run  />
        </App>
       ,
        document.getElementById('react-container')
);

标签： javascriptreactjsreact-routerjsx

Answer 1

因为 Route 组件没有将 props 向下传递给匹配的组件。尝试这样的事情：

<Route  path="/" render={() => <Audience title={this.props.title} />} />

另请查看 react-router 文档中的更多示例。