Question

这是我的应用程序的当前状态：出于测试目的，当用户单击Sections组件中的列表项时，他们应该看到一个显示“Hello World”的警报。此函数将传播到Header组件，最后主要组成部分。我被困在为什么没有弹出警报。任何帮助都可以。

import {Router, Route, IndexRoute, browserHistory} from 'react-router'
import React from 'react'
import {render} from 'react-dom'
import Main from './components/Main'
import Articles from './components/Articles'
import Whoops from './components/Whoops'

render((
 <Router history={browserHistory}>
 <Route path="/" component={Main}/>
   <Route path="*" component={Whoops}/>
 </Router>
), document.getElementById('container'))

标题

import React from 'react'
import Time from 'react-time'
import Moment from 'moment'
import Sections from './Sections'

 let Header = React.createClass({

 getInitialState(){
   return {sections: false};
 },
renderSections: function(){
  this.setState({sections: true});
},
displaySection: function(){
  this.props.switchSection
},
render: function(){
let now = new Date()
return(
 <div>
   <p className="date">Today is <Time value={now} format="MM/DD/YYYY"       /></p>
   <button className="sectionsButton" onClick=    {this.renderSections}>SECTIONS</button>
   { this.state.sections ? <Sections handleClick={this.displaySection}/> : null }
  <h1>New York Times - Top Articles</h1>
</div>
 )
}
})
export default Header;

主要组成部分：

import React from 'react'
import $ from 'jquery'
import Articles from './Articles'
import Header from './Header'
import { Link } from 'react-router'

let Main = React.createClass({

  getInitialState(){
    return{
     articles: [],
     section: "home"
   };
 },
 loadData: function(){
   let  url =  "https://api.nytimes.com/svc/topstories/v2/"  + this.state.section + ".json";
   url += '?' + $.param({
     'api-key': "88630a5a6b03457b8c7f6ab55b75fbbe"
   });
   $.ajax({
     url: url,
     cache: false,
     data: { format: 'json' },
     success: function(data){
       this.setState({articles: this.state.articles.concat(data.results)});
       console.log(data.results);
     }.bind(this),
     error: function() {
       console.log(alert("Houston, we have a problem!"));
 }.bind(this)
   });
 },

 componentWillMount: function(){
   this.loadData();
 },

 handleSwitch: function(){
   alert("hello from Main");
 },

 render: function () {
   let articles = this.state.articles.map(function(article,i){
     return <Articles key={i} article={article} />
   });
   return(
     <div>
       <Header switchSection={this.handleSwitch}/>
       <ul className="articleList">{articles}</ul>
     </div>
   )
 }
});

export default Main;

章节组件：

import React from 'react'

let Sections = React.createClass({

 renderSection: function(){
   this.props.handleClick;
 },

  render: function(){
    return(
     <div>
       <ul className="sections">
         <li className="category" onClick={this.renderSection}>Home</li>
         <li className="category" onClick={this.renderSection}>Opinion</li>
         <li className="category" onClick={this.renderSection}>World</li>
         <li className="category" onClick={this.renderSection}>National</li>
         <li className="category" onClick={this.renderSection}>Politics</li>
         <li className="category" onClick={this.renderSection}>Business</li>
         <li className="category" onClick={this.renderSection}>Technology</li>
         <li className="category" onClick={this.renderSection}>Books</li>
       </ul>
     </div>
    )
  }
})
export default Sections;

无法从父组件访问道具

0 个答案: