Question

这个多重组件不起作用;

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router'

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
               <li><Link>Home</Link></li>
            </ul>

           {this.props.children}
         </div>
      )
   }
}

export default App;

class Home extends React.Component {
   render() {
      return (
         <div>
            <h1>Home...</h1>
         </div>
      )
   }
}

export default Home;

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Home} />
         <Route path = "home" component = {Home} />
      </Route>
   </Router>

), document.getElementById('app'))

它给出了以下错误;

   ./main.js中的错误模块构建失败：SyntaxError：   C：/Users/hasithay/Desktop/reactApp/main.js：只有一个默认导出   允许每个模块。

31 | } 32 |


33 |出口默认首页;          | ^ 34 | 35 | class About扩展了React.Component {36 | render（）{


@ multi main webpack：bundle现在是VALID

答案应该是三个可点击的链接，可用于在应用启动时更改路线。

Answer 1

多个组件确实有效，但您需要使用名称导出组件，并且只能导出一个默认组件。

如下面的示例所示，我将 App 组件导出为defalut组件，将其他组件 Home，About，Contact 导出为命名组件。

对于指定的组件，您需要使用以下名称导入它们：

导入{Home，About，Contact}来自＆＃39; ./ App.jsx＆＃39;;

导入默认组件：

从＆＃39; ./ App.jsx＆＃39;;

导入应用

＆＃13;

import React from 'react';
import {Link} from 'react-router';


class App extends React.Component {
  render() {
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      {this.props.children}
      </div>
    )
  }
}

export default App;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



export class About extends React.Component {
  render() {
    return (
      <h1>About Page Content</h1>
    )
  }
}


export class Contact extends React.Component {
  render()  {
    return (
      <h1>Contact Page Content</h1>
    )
  }
}

＆＃13;

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory, IndexRoute} from 'react-router';
import App from './App.jsx';
import {Home,About,Contact} from './App.jsx';

ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Contact} />
         <Route path = "home" component = {Home} />
         <Route path = "about" component = {About} />
         <Route path = "contact" component = {Contact} />
      </Route>
   </Router>

	
), document.getElementById('app'));

＆＃13;

不要使用名称组件（主页，关于，联系）导入默认组件（应用组件）。如果您使用指定的组件导入它们，则它们无法正确呈现。

块引用

Answer 2

import React from 'react';
import {Link} from 'react-router';


class App extends React.Component {
  render() {
    return(
      <div>
      <ul>
      <li><Link to="home">Home</Link></li>
      <li><Link to="about">About</Link></li>
      <li><Link to="contact">Contact</Link></li>
      </ul>

      {this.props.children}
      </div>
    )
  }
}

export default App;



export class Home extends React.Component {
  render() {
    return (
      <h1>Home Page Content</h1>
    )
  }
}



export class About extends React.Component {
  render() {
    return (
      <h1>About Page Content</h1>
    )
  }
}


export class Contact extends React.Component {
  render()  {
    return (
      <h1>Contact Page Content</h1>
    )
  }
}

Answer 3

你有一行代码：

var arr:Array = [ { categories:["a", "b", "c"], users:["John", "Steve"], id:1, information:{ age:"30", color:"red" } }, { categories:["d", "e","c"], users:["Martin", "Jason"], id:2, information:{ age:"25", color:"blue" } }, { categories:["d", "c"], users:["Robert"], id:3, information:{ age:"26", color:"green" } } ]

在其他一些行后你有代码：

export default App;

这就是问题所在！您在一个文件中使用过export default Home;次2次。你必须改变其中一个来解决问题。

“您不能在文件中多次使用export default”。

Answer 4

将所有组件导出到一行

export default {App, Home, Contacts, About};

Answer 5

您需要按照以下代码在default和App类上同时删除Home个关键字，

export App;
export Home;

default关键字仅在您要导出一个类时使用。

Answer 6

导出默认主目录用于公开任何要在其他文件中使用的模块，但是只有一个组件是默认组件，而不是全部组件。一个模块只能导出一次。您正在使用同一条语句来导出每个不必要的组件。

使用此语句导入组件

ReactJS错误：每个模块只允许一次默认导出

6 个答案: