JSのパス状態を子に返すことに反応する

Question

私は現在、自分のクラスの1つのために反応するjsプロジェクトに取り組んでおり、どこに間違っているのか分からないようです。私はこれのためのコードを投稿することはできません、そして、これはかなりこの質問に答えることは難しいかもしれないことを理解しますが、ここに私の問題です。

私は、状態変数 'currentPage'に応じてページとしてレンダリングする3つの異なるコンポーネントの間で決定する状態を持つ親関数を持っています。この親コンポーネントでは、currentPage状態変数を変更する関数を作成しました。私は小道具を介してこれらの状態変更関数を渡して、親の状態を変更してページを再レンダリングするために子コンポーネントの内部にそれらを呼び出すことを試みています。たとえば、currentPageを 'signup'に変更するsignupという関数があるので、<Login goToSignup = {this.signup} />があります。次に、私のログインコンポーネントの中で、私はボタンのクリックを：onClick = {this.props.goToSignup}に設定しようとします。しかし、これは動作していないようです。私は反応が非常に新しく、これをどうやってやろうとしているのか誤解しているので、どんな助けでも大歓迎です。

Answer 1

この例では、3つのコンポーネントDetail, Post, XYZと親コンポーネントAppがあります。親のstateの値に基づいて、異なる成分であるrendering。すべての3つのコンポーネントで、functionを渡します。これは、親コンポーネントのcurrentPageの状態値を変更するために使用されます。

Stateless Functional Componentの場合は、DOCにチェックを入れてください。

チェックこの例：

var Post = (props) => { 
 
    return <div onClick={()=>props.changeComponent('detail')}> POST </div> 
 
} 
 
var Detail = (props) => { 
 
    return <div onClick={()=>props.changeComponent('xyz')}> DETAIL </div> 
 
} 
 
var XYZ = (props) => { 
 
    return <div onClick={()=>props.changeComponent('post')}> XYZ </div> 
 
}  
 

 
class App extends React.Component{ 
 

 
    constructor(){ 
 
     super(); 
 
     this.state = {currentPage: 'post'} 
 
     this.changeComponent = this.changeComponent.bind(this) 
 
    } 
 
    
 
    changeComponent(currentPage){ 
 
     this.setState({currentPage}); 
 
    } 
 
    
 
    renderTab(){ 
 
     switch(this.state.currentPage){ 
 
     case 'post': return <Post changeComponent={this.changeComponent}/> 
 
     case 'detail': return <Detail changeComponent={this.changeComponent}/> 
 
     case 'xyz': return <XYZ changeComponent={this.changeComponent}/> 
 
     } 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      {this.renderTab()} 
 
      <div style={{marginTop: 100}}>*Click on Page name to render different page</div> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'>

更新（OPがes5で同じ例を求めた）ES5で書かれ

同じ例（について多くを知らないes5私が間違いを犯した場合は私を修正してください）：

function Post(props) { 
 
    return <div onClick={()=>props.changeComponent('detail')}> POST </div> 
 
} 
 
function Detail(props){ 
 
    return <div onClick={()=>props.changeComponent('xyz')}> DETAIL </div> 
 
} 
 
function XYZ(props){ 
 
    return <div onClick={()=>props.changeComponent('post')}> XYZ </div> 
 
}  
 

 
var App = React.createClass({ 
 

 
    getInitialState: function(){ 
 
     return (
 
      {currentPage: 'post'} 
 
    ) 
 
    }, 
 
    
 
    changeComponent: function(currentPage){ 
 
     this.setState({currentPage}); 
 
    }, 
 
    
 
    renderTab: function(){ 
 
     switch(this.state.currentPage){ 
 
     case 'post': return <Post changeComponent={this.changeComponent}/> 
 
     case 'detail': return <Detail changeComponent={this.changeComponent}/> 
 
     case 'xyz': return <XYZ changeComponent={this.changeComponent}/> 
 
     } 
 
    }, 
 
    
 
    render: function(){ 
 
     return(
 
     <div> 
 
      {this.renderTab()} 
 
      <div style={{marginTop: 100}}>*Click on Page name to render different page</div> 
 
     </div> 
 
    ) 
 
    } 
 
}) 
 

 
ReactDOM.render(
 
    <App/>, 
 
    document.getElementById('app') 
 
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'>