使用REACTjs组件REACTjs

Question

我在处理反应元件方面遇到了麻烦。我的问题已经通过堆叠溢出在几个问题中得到了答案，但我无法解决我与他们的问题，这就是为什么我再次发帖的问题。

我的app-client.js文件

var React = require("react");
var ReactDom = require("react-dom");
var Router = require("react-router");
var Route = Router.Route;
var DefaultRoute = require("react-router").DefaultRoute;

var APP = require("./components/APP");
var Audience = require("./components/Audience")
var Speaker = require("./components/Speaker")
var Board = require("./components/Board")

var routes = (
    <Route handler={APP}>
        <Route path="/" handler={Audience}></Route>
        <Route name="speaker" path="speaker" handler={Speaker}></Route>
        <Route name="board" path="board" handler={Board}></Route>
    </Route>
);

ReactDom.render(<Router>{routes}</Router>, document.getElementById('react-container')) 

在我的App文件中，我试图用这一行var RouteHandler = require("react-router").RouteHandler;来处理所有这些路由

我在控制台中有两个错误，如

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

和

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: Object

如果有人关心查看整个代码，那么在github以及https://github.com/ijunaid8088/react-sockets上，谢谢您的帮助

Answer 1

您所收到的错误来自您指定的使用此错误。据我所知，在React路由器中没有这样的特性。

在应用程序文件中删除它的使用将修复这2个错误.

我猜您想要实现的是，您的应用程序成为容器，组件，以及您的组件在每个路径上显示为子级。

建议的解决办法：

在app-client.js中：

var React = require("react");
var ReactDom = require("react-dom");
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var IndexRoute = require("react-router").IndexRoute;
var hashHistory = require("react-router").hashHistory;

var APP = require("./components/APP");
var Audience = require("./components/Audience")
var Speaker = require("./components/Speaker")
var Board = require("./components/Board")

ReactDom.render(
    <Router history={ hashHistory } >
        <Route path="/" component={ APP }>
            <IndexRoute component={ Audience}/>
            <Route name="speaker" path="speaker" component={Speaker}></Route>
            <Route name="board" path="board" component={Board}></Route>
        </Route>
    </Router>,
    document.getElementById('react-container')
);

请注意，属性历史记录已设置为hashHistory (必须从React路由器中获得)。

上面的JSX将使APP组件出现在根("/")路径上。为了使受众组件出现在根路径上，我已经将组件设置为React路由器知道将其呈现为APP 有关更多信息，请参见索引路由/索引链接的一个子组件。

其他组件(议长和董事会)将在访问相关路径时代替听众。还请注意，我是如何为每个路由而不是处理程序设置组件属性的。

随着听众、议长和董事会组件的连接，我们可以转移到下一个文件：

在APP.js内部：

3)确保提供儿童路线

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

可以使用以下方法引用要呈现的子路由：

{this.props.children}

React路由器句柄根据路由路径传递哪些路由器。

编辑： 您可以将您的项目设置为使用ES6导入和导出以及销毁，这样就可以编写如下所需的函数： 从“ReactDOM”导入ReactDOM；从“ReactDOM dom”导入ReactDOM；从“ReactDOM路由器”导入{路由器、IndexRoute、路由、hashHistory}；等。