Push-компонент для массива компонентов - ReactJS

Question

Я немного потерял в массивах React. Я хочу, чтобы иметь массив компонентов (статей), и в этом массиве я хочу иметь заголовок и контент.

Что я хочу сделать с этим массивом, это добавить, удалить и отобразить его на моей странице.

Так что я делаю неправильно? И что именно это действие точно называется?

Код был из ReactJS demos и немного модифицирован мной.

var ReactDOM = require('react-dom'); 
var React = require('react'); 

// Articles page 

const Articles = React.createClass({ 
    getInitialState() { 
    return {article: [ 

     {'title': 'hello', 'content': 'hello hello'}, 
     {'title': 'hello1', 'content': 'hello hello1'}, 
     {'title': 'hello2', 'content': 'hello hello2'}, 
     {'title': 'hello3', 'content': 'hello hello3'} 

    ]}; 
    }, 
    onAdd() { 
    const newArticle = 
     this.state.article.concat([window.prompt('Enter article')]); 
     this.setState({article: newArticle}); 
    }, 
    onRemove(i) { 
    const newArticle = this.state.article; 
    newArticle.splice(i, 1); 
    this.setState({article: newArticle}); 
    }, 
    render() { 
    const article = this.state.article.map((article, i) => { 
     return (
     <div key={article} onClick={this.onRemove.bind(this, i)}> 
      {article} 
     </div> 
    ); 
    }); 
    return (
     <div className="container"> 
     <div className="row"> 
      <div className="col-md-12 cBusiness"> 
      <p>Articles Page</p> 

      <button onClick={this.onAdd}>Add Article</button> 
       <br /> 
       <br /> 
       {title} 
       <br /> 
       <br /> 
       {content} 
      </div> 
     </div> 
     </div> 
    ); 
    }, 
}); 

module.exports = Articles; 

Answer 1

В вашей не метод визуализации нет никаких переменных title и content, однако есть переменная article где вы создайте список со статьями, вы должны удалить переменную title и content от render и использовать article. Я рефакторинг кода, и теперь он выглядит так

const Articles = React.createClass({ 
    getInitialState() { 
    return { 
     articles: [ 
     {'title': 'hello', 'content': 'hello hello'}, 
     {'title': 'hello1', 'content': 'hello hello1'}, 
     {'title': 'hello2', 'content': 'hello hello2'}, 
     {'title': 'hello3', 'content': 'hello hello3'} 
     ] 
    }; 
    }, 

    onAdd() { 
    const title = window.prompt('Enter article title'); 
    const content = window.prompt('Enter article content'); 

    this.setState({ 
     articles: this.state.articles.concat({ title, content }) 
    }); 
    }, 

    onRemove(index) { 
    this.setState({ 
     articles: this.state.articles.filter((e, i) => i !== index) 
    }); 
    }, 

    render() { 
    const articles = this.state.articles.map((article, i) => { 
     return (
     <div key={i}> 
      <h2> 
      { article.title } 
      <span 
       className="link" 
       onClick={ this.onRemove.bind(this, i) } 
      > 
      X 
      </span> 
      </h2> 
      <p>{ article.content }</p> 
     </div> 
    ); 
    }); 

    return (
     <div className="container"> 
     <div className="row"> 
      <div className="col-md-12 cBusiness"> 
      <p>Articles Page</p> 
      <div>{ articles }</div> 
      <button onClick={this.onAdd}>Add Article</button> 
      </div> 
     </div> 
     </div> 
    ); 
    }, 
}); 

Example

Answer 2

В вашем рендере вы создаете строки своего списка, и вы назначили его в const, называемом «статьей». Однако ваш рендер:

return (
    <div className="container"> 
    <div className="row"> 
     <div className="col-md-12 cBusiness"> 
     <p>Articles Page</p> 

     <button onClick={this.onAdd}>Add Article</button> 
      <br /> 
      <br /> 
      {title} 
      <br /> 
      <br /> 
      {content} 
     </div> 
    </div> 
    </div> 
); 

Нет здесь, где вы создаете созданную статью. Вы можете заменить {content} на {article}? Поскольку я нигде не видел объявления содержания.

Кроме того, просто в стороне, вы назвали так много переменных, как «статья». Это немного трудно следовать, может помочь плюрализация в некоторых случаях (но это не относится к вопросу спросил - :))