onclickと関数の呼び出しを使用してreactjs

Question

これまで私が他のコンポーネントを呼び出した内の関数を呼び出す必要があります学生のボタンをクリックすると、エラーが発生しています。 onlickで他のコンポーネントを呼び出すにはどうしたらいいですか？

import React from 'react'; 
//import s from './style.css'; 
import Students from './students.js' 
require('./style.scss'); 
class Display extends React.Component { 

    function studentfunction(){ 
    <Students/> 
    }; 
    render() 
    { 

    return(
     <div className="container"> 
     {this.state.clicked ? <Students/>} 
     <h1 className="dashboard">Dashboard</h1> 
    <table className="table1" > 
    <tbody className="tbody1" > 
<tr> 
    <td ><input type="button" value="Students" onClick={this.studentfunction} /></td> 
    <td> <input type="button" value="Teachers" /></td> 

    <td> <input type="button" value="Inbox" /></td> 
</tr> 
<tr> 
    <td> <input type="button" value="Holidays" /></td> 
    <td> <input type="button" value="Circular" /></td> 

    <td> <input type="button" value="Notifications" /></td> 
    </tr> 
<tr> 
    <td> <input type="button" value="Events" /></td> 

     <td> <input type="button" value="Gallery" /></td> 

</tr> 
</tbody> 
    </table> 

     </div> 
    ); 
    } 
} 
export default Display 

;あなたが必要なもの

Answer 1

最も良い方法はを使用することですライブラリ。 the tutorialに従うことを強くお勧めします。

setting up react-router in your appの後にこのようなものが表示されます。

<Router history={hashHistory}> 
    <Route path="/" component={App}/> 
    <Route path="/students" component={Students}/> 
    </Router> 

次のステップは、react-routerからLink成分を使用することです。

// modules/App.js 
import React from 'react' 
import { Link } from 'react-router' 

export default React.Component { 
    render() { 
    return (
     <div> 
     <h1>Your App</h1> 
     <ul role="nav"> 
      <li><Link to="/about">About</Link></li> 
      <li><Link to="/students">Students</Link></li> 
     </ul> 
     </div> 
    ) 
    } 
} 

Answer 2

は、ボタンのonClick handlerではなく、正しいコンポーネントへのルートへのリンク

試してみて、学生のコンポーネントの

をルートを指定して、

<button type="button"><Link to="/Students">Students</Link> 

onClickを期待を使用します関数ではなく、エラーが発生するコンポーネントではない