フォームが取得されない理由は何ですか？

Question

私はトレーニングアプリを開発しようとしていますが、今はボタンをクリックすると 'this is the form'というフレーズが追加されますが、ブラウザは空白になり、コンソールに表示されますこのエラー：

キャッチされないにReferenceError：

import React from 'react'; 
import AppActions from '../actions/AppActions'; 
import AddForm from './AddForm.js'; 

export default class App extends React.Component { 

    render(){ 

     return(
      <div> 
       <h1 className="text-center page-header">WorkoutLogger</h1> 
       <a onClick={AppActions.showForm.bind(null, 'this is the form')} href="#" className="btn btn-primary btn-block">Add Workout</a> 
       <br /> 
       {form} 
       <br /> 
       WORKOUTS 
       <br /> 
      </div> 
     ); 
    } 
} 

これは私のコンポーネント/ AddForm.jsファイルです：

import React from 'react'; 

export default class AddForm extends React.Component { 

    render(){ 
     return(
      <div> 
       FORM 
      </div> 
     ); 
    } 
} 

フォームがこれは私のコンポーネントである/ app.jsファイル

が定義されていません。 10

これが私の行動/ AppActions.jsファイルです：

：これは私の定数/ AppConstants.jsファイルです

import {Dispatcher} from 'flux'; 

const flux = new Dispatcher(); 

export function register(callback) { 
    return flux.register(callback); 
} 

export function dispatch(payload){ 
    console.log(payload) 
    flux.dispatch(payload); 
} 

：これは私のディスパッチャ/ AppDispatcher.jsファイルです

import {dispatch, register} from '../dispatcher/AppDispatcher'; 
import AppConstants from '../constants/AppConstants'; 

export default { 
    showForm(form){ 
     dispatch({ 
      actionType: AppConstants.SHOW_FORM, form 
     }) 
    } 
} 

export default { 
    SHOW_FORM: 'SHOW_FORM' 
} 

これは私のストア/ AppStore.jsファイルです。

import {dispatch, register} from '../dispatcher/AppDispatcher'; 
import AppConstants from '../constants/AppConstants'; 
import {EventEmitter} from 'events'; 
import assign from 'object-assign'; 
import AppAPI from '../utils/AppAPI'; 

const CHANGE_EVENT = 'change'; 
const _showForm = false; 

var _items = []; 

var AppStore = assign({}, EventEmitter.prototype, { 
    emitChange: function(){ 
     this.emit(CHANGE_EVENT); 
    }, 
    showForm: function(){ 
     _showForm = true; 
    } 
}) 

AppDispatcher.register(function(payload){ 
    var action = payload.action; 

    switch(action.actionType){ 
     case AppConstants.SHOW_FORM: 
      AppStore.showForm(); 
      AppStore.emit(CHANGE_EVENT); 
      break; 
    } 

    return true; 
}); 

module.exports = AppStore; 

Answer 1

{form}がcomponents/app.jsに定義されていない場合、その場所にAddFormコンポーネントを表示したい場合は、{form}を