在没有JSX的情况下使用map（）创建React组件时出错

Question

我有以下对象：

[
  {
    "id": 0,
    "name": "Step 1",
    "summary": "",
    "required": true,
    "articles": [
      {
        "name": "Article 1",
        "url": "...",
        "comments": [],
        "questions": []
      }
    ]
  },
  {
    "id": 1,
    "name": "Step 2",
    "required": true,
    "summary": "",
    "articles": [
      {
        "name": "Article 1",
        "url": "...",
        "comments": [],
        "questions": []
      }
    ]
  },
  {
    "id": 2,
    "name": "Step 3",
    "required": false,
    "summary": "",
    "articles": [
      {
        "name": "Article 1",
        "url": "...",
        "comments": [],
        "questions": []
      },
      {
        "name": "Article 2",
        "url": "...",
        "comments": [],
        "questions": []
      },
      {
        "name": "Article 3",
        "url": "...",
        "comments": [],
        "questions": []
      },
      {
        "name": "Article 4",
        "url": "...",
        "comments": [],
        "questions": []
      }
    ]
  },
  {
    "id": 3,
    "name": "Step 4",
    "summary": "Coming Soon!",
    "required": true
  }
]

有步骤，每个步骤可以有多篇文章。

跟随是“步骤”组件：

import { createElement as ce, Component } from 'react';

class Steps extends Component {

  render() {
    const { steps } = this.props;
    return ce('div', { className:'allTheSteps' }, Step({ steps }));
  };

};

const Step = ({ steps }) => (
  steps.map( ( { name, id, articles }, i ) => ce('div', {className: 'mainBoxes clearfix', key: id},
  ce('strong', {className: 'titleText', key: id + '-' + i}, name),
  ce('div', { className: 'stepArticle'},
    articles.map( ({ name, url }), j ) => Article({ name, url }),
  )
))
);

export default Steps;

以下是文章部分：

import { createElement as ce } from 'react';

const Article = ({ name, url }) => (
    ce('div', {className: 'articleTitle'},
      ce('input', {type: 'checkbox', name: 'done', className: 'checkBoxes'}),
      ce('a', { className: 'checkLink', target: '_blank', href: url }, name),
      ),
    ce('div', {className: 'articleActions'},
      ce('input', {type: 'button', value: 'Make Notes', className: 'addNotes'}),
      ce('input', {type: 'button', value: 'Ask Clausehound', className: 'askQuestions'}),
      ),
    ce('textarea', {className: 'textAreas notes', placeholder: 'My Notes: '}),
    ce('textarea', {
      className: 'textAreas questions',
      placeholder: 'Questions for Clausehound Research Team: ',
    })
);

export default Article;

以下是创建根元素的index.js：

  const steps = await loadSteps(ID); // fetch
  render(
    ce(Steps, { steps },
      ce(Article, steps.articles)
    ),
    document.querySelector('.root'),
  );

我收到以下错误：

未捕获（承诺）错误：Steps.render（）：必须返回有效的React元素（或null）。 您可能返回了undefined，数组或其他无效对象

我要呈现所有步骤，然后呈现这些步骤中的文章。 但是步骤不会呈现，因此我也无法添加文章。

怎么了 我对React还是很陌生，所以如果这很愚蠢，我深表歉意。

Answer 1

作为错误本身的解释，您不能从Steps组件的render方法返回数组。 因此，作为解决方案，您可以使用div元素包装数组，然后返回。

class Steps extends Component {

  render() {
    const { steps } = this.props;
    return ce('div', null, Step({ steps }));
  };

};