Javascript 如何单击按钮以获取具有react的组件之一_Javascript_Html_Reactjs

Javascript 如何单击按钮以获取具有react的组件之一

javascript html reactjs

Javascript 如何单击按钮以获取具有react的组件之一,javascript,html,reactjs,Javascript,Html,Reactjs,这是我的html文件： <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style/style.css"> </head> <body> <button id="aa">another</button> <button id="eng">

这是我的

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>


另一个
英语

我想

点击按钮上的（另一个）它给div一个类容器，这个容器是渲染函数从索引.js，
当点击按钮上的（英文）时，它会给div一个类containerAA
也就是说，使用React router
保存一个index.js
文件，从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')
)

从'react Router'导入{Router，hashHistory，Route}
ReactDOM.render(
，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>
      )
   }

}

从'react router'导入{Link}；
类应用程序扩展了React.Component{
render（）{
返回(
另一个
英语
{this.props.children}
)
}
}

我认为这是一种更好的、更具反应性的方式来实现你想要实现的目标
你可以按照下面的设置你的react路由器
谢谢你实际上这是我的index.js我将它改为main你的index.js将只包含路由导入WEng from./WEng从导入WAr./WAr类应用扩展react.Component{constructor（props）{super（props）；this.state={im:[]}；this.componentDidMount（）；}componentDidMount（）{axios.get（'）。然后（函数（res）{this.setState（{im:res.data.today.iconday}）}.bind（this））.catch（函数（响应）{}；}render（）{return（）}render（，document.querySelector（'.container'））；这是我的warvar WeatherAr=函数（props）{render（）{return（）}}导出默认WeatherAr；路由将是一个文件吗？