将组件推送到组件数组-ReactJS [英] Push component to array of components - ReactJS

问题描述

我在React数组中迷路了.我想要做的是拥有一组组件(文章)，并且在该数组中我想要标题和内容.

I am a bit lost in React arrays. What I want to do is to have array of components (articles) and in that array I want to have title and content.

我要对该数组执行的操作是添加，删除并将其显示在我的页面上.

What I want to do with that array is add, remove and display it on my page.

那么我在做什么错了?还有这个动作到底叫什么?

So what am I doing wrong? Also what is this action exactly called?

代码来自 ReactJS演示，我做了一点修改.

Code was from ReactJS demos and modified a little by me.

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;

推荐答案

在渲染方法中，没有变量 title 和 content ，但是有变量article (要在其中创建包含文章的列表)，则应从 render 中删除变量 title 和 content ，并使用 article .我已经重构了您的代码，现在看起来像这样

In your render method there are no variables title and content, however there is variable article where you are creating list with articles, you should remove variable title and content from render and use article. I've refactored your code, and now it looks like this

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>
    );
  },
});

示例

这篇关于将组件推送到组件数组-ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！