我目前正在为我的一个班级开发一个 react js 项目，似乎无法弄清楚我哪里出错了。我无法为此发布任何代码，我知道这可能会使回答这个问题变得相当困难，但这是我的问题。
我有一个父函数，它的状态根据状态变量“ currentPage”决定在 3 个不同的可能组件之间呈现为页面。在这个父组件中，我创建了可以改变currentPage状态变量的函数。我试图通过道具传递这些状态更改函数，然后在子组件内部调用它们以更改父组件的状态并重新呈现页面。例如，我有一个名为 signup 的函数，它将 currentPage 更改为 ' signup'，所以我有<Login goToSignup = {this.signup} />. 然后，在我的 Login 组件内部，我尝试将单击按钮设置为：onClick = {this.props.goToSignup}。但这似乎不起作用。我对反应很陌生，也许我误解了我应该如何做到这一点，所以任何帮助将不胜感激。
在这个例子中，有 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'>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句