反应 this.props.title 为空！！为什么？答案

【问题标题】：React this.props.title is null!! Why?反应 this.props.title 为空！！为什么？
【发布时间】：2019-01-31 15:20:53
【问题描述】：

我有 3 个状态（状态、标题、舞蹈）

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

App.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 为空 为什么？必须 this.props.title == 'no Tile'

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

在应用程序客户端中运行

app-client.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')
);

【问题讨论】：

标签： javascript reactjs react-router jsx

【解决方案1】：

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

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

还有Check out more examples from react-router docs.

【讨论】：