React JS通过状态改变功能给孩子

Question

我目前正在为我的一个类的一个反应js项目工作，似乎无法弄清楚我哪里出错了。我不能为此发布任何代码，并且我明白这可能会使得回答这个问题变得相当困难，但这是我的问题。

我有一个父函数，它有一个状态，根据状态变量'currentPage'决定3个不同的可能组件。在这个父组件中，我制作了将会改变currentPage状态变量的函数。我试图通过道具传递这些状态更改函数，然后在子组件内调用它们来更改父项的状态并重新呈现页面。例如，我有一个叫做signup的函数，它将当前页面更改为'signup'，所以我有<Login goToSignup = {this.signup} />。然后，在我的登录组件中，我尝试将按钮设置为：onClick = {this.props.goToSignup}。但这似乎并不奏效。我很新，反应并且可能误解我应该如何做到这一点，所以任何帮助将不胜感激。

Answer 1

在此示例中，有3个组件Detail, Post, XYZ和父组件App。在父母的state值的基础上，rendering的不同成分。在所有通过function的3个组件中，用于更改父组件中的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'>