Question

我目前正在为我的一个班级做一个反应js项目，似乎无法弄清楚我哪里出错了。我无法发布任何代码，我知道这可能会让这个问题变得相当困难，但这是我的问题。

我有一个父函数，它有一个状态，根据状态变量＆＃39; currentPage＆＃39;决定在3个不同的可能组件之间作为页面呈现。在这个父组件中，我创建了将改变currentPage状态变量的函数。我试图通过道具传递这些状态更改函数，然后在子组件内部调用它们来更改父级的状态并重新呈现页面。例如，我有一个名为signup的函数，它将currentPage更改为＆＃39; signup＆＃39;，所以我有<Login goToSignup = {this.signup} />。然后，在我的Login组件内部，我尝试将按钮单击设置为：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'>

React JS将状态更改函数传递给child

1 个答案: