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

在您的渲染方法中，没有变量article和title，但是您要创建包含文章的列表的变量content，您应该删除变量render和来自article的{{1}}并使用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> ); }, });。我重构了你的代码，现在它看起来像这样

Select tblQuickRegister.memberId , tblUserLogin.lastLogin , tblQuickRegister.dob,tblPhysicalAttributes.height,
 tblHomeTruth.religion, tblEducation.highestQualification , tblOccupation.occupation, tblPicture.profilePic1
 from tblQuickRegister full outer join tblUserLogin on tblQuickRegister.memberId = tblUserLogin.memberId
 full outer join tblPhysicalAttributes on tblQuickRegister.memberId = tblPhysicalAttributes.memberId
 full outer join tblHomeTruth on tblQuickRegister.memberId = tblHomeTruth.memberId
 full outer join tblEducation on tblQuickRegister.memberId = tblEducation.memberId 
 full outer join tblOccupation on  tblQuickRegister.memberId = tblOccupation.memberId 
 full outer join tblPicture on tblQuickRegister.memberId = tblPicture.memberId 
 full outer join tblMaritalStatus on tblQuickRegister.memberId = tblMaritalStatus.memberId 
 full outer join tblContact on tblQuickRegister.memberId = tblContact.memberId 
 where
 (tblQuickRegister.sex = @sex or @sex is null)
 And (tblMaritalStatus.maritalStatus = @maritalStatus or @maritalStatus is null)
 And ((DATEDIFF(DAY,Convert(date,tblQuickRegister.dob),getdate())/365 >= @minage) or @minage is null)
 And ((DATEDIFF(DAY,Convert(date,tblQuickRegister.dob),getdate())/365 <= @maxage) or @maxage is null)
 And (tblContact.[state] = @state or @state is null)
 And (tblContact.city = @city or @city is null)

Example

Answer 2

在渲染中，您正在创建列表的行，并将其分配给名为“article”的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}吗？我在任何地方都没有看到任何内容声明。

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

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

2 个答案: