将组件推送到组件数组 - ReactJS

IT技术 arrays reactjs
2021-05-09 07:58:55

我有点迷失在 React 数组中。我想要做的是拥有组件（文章）数组，并且在该数组中我想要标题和内容。

我想对这个数组做的是在我的页面上添加、删除和显示它。

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

代码来自ReactJS 演示并由我修改了一点。

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;
2个回答

在您的渲染方法中，没有变量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

在您的渲染中，您正在创建列表的行，并将其分配给名为“文章”的常量。但是你的渲染是：

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

没有您渲染创建的“文章”的地方。你可以用{article}替换{content}吗？因为我在任何地方都没有看到任何内容声明。

另外，顺便说一句，您将如此多的变量命名为“文章”。有点难以理解，在某些情况下可能有助于复数化（但这与提出的问题无关 -:)）

其它你可能感兴趣的问题
上一篇奇怪的挤压不足问题 下一篇Anet A8 Marlin BLtouch 在归位期间向上移动而不是向下移动