Question

这是我的html文件：

<!DOCTYPE html>
   <html>
     <head>
        <link rel="stylesheet" href="style/style.css">
     </head>
     <body>
        <button id="aa">another</button>
        <button id="eng">English</button>
        <div class="container"></div>
        <div class="containerAA"></div>
     </body>
     <script src="bundle.js"></script>
     <script src="index.js"></script>
     <script src="indexAr.js"></script>
</html>

我希望在click（另一个）button上为class容器提供div render functions来自indexAr.js，当click button（英文）时，它会给class containerAA div 这是来自render的{{1}}数据。

Answer 1

我认为当您使用React router并保留单个index.js文件时，可以更轻松地解决问题。您无需单独捆绑文件。

您的路线将在index.js中，并且看起来像

import {Router, hashHistory, Route} from 'react-router'
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}>
        <Route path="another" component={Another}/>
        <Route path="english" component={English}/>
    </Route>
  </Router>, document.getElementById('app')
)

你的应用程序组件将类似

import {Link} from 'react-router';

class App extends React.Component {
    render() {
      return (
         <div>
             <button><Link to="another">Another</Link><button>
             <button><Link to="english">English</Link></button>    
             <div>{this.props.children}</div>         
         </div>
      )
   }

}

我认为对于你想要实现的目标，这是一种更好的反应方式。

您可以按照以下 youtube tutorial 来设置您的react-router

如何点击按钮以获得一个具有反应的组件

1 个答案: