Блог

Я новичок в ReactJS, и я работаю над фильтруемой галереей, но теперь я смотрю на пример мышления в ReactJS, и я увидел, что они создают разные классы для каждого компонента. Я этого не делал, но теперь я пытаюсь это сделать, сначала мой код выглядел так: `

 var SearchBar = React.createClass({
  getInitialState() {
    return { text:'', array: this.props.array};
  },
  handleChange(event) {
    var array = this.filterList(event.target.value);
    this.setState({ text: event.target.value, array: array });

    return this.state.text;
  },
  render() {     
      var arrayComponents = this.state.array.map(function(photo) {
         return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
      });

    return <div>
      <h1>Hello, {this.props.name}</h1>
      <p>{this.state.text}</p>
      <input type="text"  onChange={this.handleChange} />
      <ul>
        {arrayComponents}
      </ul>
    </div>;
  },
  filterList (filterText) {
    var updatedList = this.props.array, 
        filterTextLength = filterText.length;

    return updatedList.filter(function(item){
        var splitName = item.name.toLowerCase().slice(0, filterTextLength);
        var lowerCaseFilterText = filterText.toLowerCase();
        return splitName === lowerCaseFilterText;
    });
  }
});
  

Теперь я хочу создать другой класс ImageList, который должен включать var arrayComponents , но если я сделаю это:

 var ImageList = React.createClass({
  render() {     
      var arrayComponents = this.props.array.map(function(photo) {
         return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
      });
    <ul>
      {arrayComponents}
    </ul>
  }
})
  

и чем в функции рендеринга add <ImageList array={array}/> вместо <ul>{arrayComponent}</ul> этого выдает мне ошибку о том Cannot read property 'map' of undefined , как мне передать состояние массива в этот класс ImageList.

Вот ссылка на codepen: ССЫЛКА

Я внес следующие изменения в ваш код: http://codepen.io/PiotrBerebecki/pen/zKRAGZ

1) Передайте состояние массива в этот ImageList класс

 <ImageList array={this.state.array} />
  

2) Добавьте return оператор в render метод ImageList

 // Add return
    return (
      <ul>
        {arrayComponents}
      </ul>
    );
  

3) Добавьте key атрибут к li тегу при использовании метода map:

       var arrayComponents = this.props.array.map(function(photo, index) {
// -------------------------------
// Add index to the li tag
// ----------------vvvvvvvvvvv
        return <li key={index} className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
      });
  

Документы React: https://facebook.github.io/react/docs/multiple-components.html#dynamic-children

Вам нужно передать текущее состояние массива. Итак, ваше объявление компонента должно выглядеть следующим образом:

 <ImageList array={this.state.array}/>
  

Здесь я вижу три проблемы. Первый,

 var ImageList = React.createClass({
  render() {     
      var arrayComponents = this.props.array.map(function(photo) {
         return <li className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
      });
    <ul>
      {arrayComponents}
    </ul>
  }
})
  

вы должны сказать:

 return (<ul>
      {arrayComponents}
    </ul>)
  

Во-вторых, когда вы используете динамически сгенерированные коды, вы должны добавить key к ним prop:

  var arrayComponents = this.props.array.map(function(photo) {
         return <li key={SOME_KEY} className="photo photo-name">{photo.name} <img className="photo" src={photo.link}/></li>;
      });
  

В-третьих, в вашем codepen, когда вы говорите :

 <ImageList array={array}/>
  

вы ссылаетесь на глобальную переменную array (вы объявляете ее в верхней части своего кода), вы имеете в виду:

 <ImageList array={this.state.array}/>