Реагировать - что я делаю неправильно?

Question

Я пытаюсь узнать, как реагировать и создавать небольшое приложение, которое принимает имена, а затем отображает имена.

У меня есть форма ввода, и я могу получить данные из формы ввода после нажатия submit в мой объект состояния names.

однако я застрял на переход государства от родителя к другому компоненту, который находится внутри моего ShowNames компонента:

Так, в App Store, я делаю это делает:

render : function() { 
     return (
      <div> 
       <InputName addToState={this.addToState}/> 
       <ShowName renderName={this.renderName}/> 
      </div> 
     ) 
    } 
}); 

Тогда ShowName компонент имеет следующие:

var ShowName = React.createClass({ 

    render : function() { 
     return (
      <ListOfNames renderName={this.props.renderName}/> 
     ) 
    } 
}); 

Так что я сделал

var ListOfNames = React.createClass({ 

    render : function() { 
     return (
      <ul renderName={this.props.renderName}> 
       {Object.keys(this.state.names).map(this.renderName)} 
      </ul> 
     ) 
    } 
}); 

Но проблема в том, что он говорит, что не может читать имена свойств "null". Может кто-нибудь помочь?

Answer 1

Вам необходимо инициализировать состояние, иначе состояние будет пустым.

React.createClass({ 
    getInitialState: function() { 
     return { names: [] }; 
    }, 

    // all the rest here 
} 

---

EDIT

после просмотра кода я заметил несколько ошибок, обновленный код теперь здесь: http://jsbin.com/sewoxu/edit?js,output

Так что главная ошибка в том, что функция визуализации от ShowName было использовано государство, чтобы получить наименования, но имена, которые передавались через имущество:

<ShowName renderName={this.renderName} names={this.state.names}/> 

так что в этом случае, чтобы получить доступ имен атрибутов вам нужно сделать:

this.props.names 

Кроме того, в примере я переместил renderName функции внутри ShowName компонента.

Надеется, что это помогает :)