Question

我有一个组件，我试图渲染四次，每次都有不同的道具。为了对我的代码更简洁，并且实际上每次都没有为组件及其道具写出JSX，我试图使用map来创建组件的不同实例。现在，这就是看起来的样子：

import React, { Component } from 'react';
import Panel from './components/Panel';
import Results from './components/Results';
import Intro from './components/Intro';

const questionsMap = [0, 1, 2, 3];

class React extends Component {
    constructor (props) {
        super (props);
        this.state = {
            questions: ['question1', 'question2', 'question3', 'question4'],
            answers: ['answers1', 'answers2', 'answers3', 'answers4']
        }
        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(value) {
        /* Some code for when buttons are clicked */
    }

    render () {
        return (
            <Intro />
            {questionsMap.map(i => {
            return <Panel question={this.state.questions.i} answers={this.state.answers.i} onSelect={this.onSelect} />
            })}
            <Results />
        );
    }
}

export default App;

现在我收到一个Unexpected token错误，指向我的渲染下的行{questionsMap.map()}，也就是我正在尝试实际执行我提到的映射的部分。我假设我使用错误的语法来完成我想要的东西？

Answer 1

这是正确的语法：

import React, { Component } from 'react';
import Panel from './components/Panel';
import Results from './components/Results';
import Intro from './components/Intro';

const questionsMap = [0, 1, 2, 3];

class React extends Component {
    constructor (props) {
        super (props);
        this.state = {
            questions: ['question1', 'question2', 'question3', 'question4'],
            answers: ['answers1', 'answers2', 'answers3', 'answers4']
        }
        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(value) {
        /* Some code for when buttons are clicked */
    }

    render () {
        return (
            <div>
              <Intro />
              {questionsMap.map(i => {
              return <Panel question={this.state.questions[i]} answers={this.state.answers[i]} onSelect={this.onSelect} />
            })}
              <Results />
            </div>
        );
    }
}

export default App;

但有一些事情并不是一个好的做法，我认为这是某种测试，所以我不希望你将其中一个组件React命名。

最重要的是你可以简单地映射状态，我会改变代码：

import React, { Component } from 'react'; import Panel from './components/Panel'; import Results from './components/Results'; import Intro from './components/Intro';


class React extends Component {
    constructor (props) {
        super (props);
        this.state = {
            questions: ['question1', 'question2', 'question3', 'question4'],
            answers: ['answers1', 'answers2', 'answers3', 'answers4']
        }
        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(value) {
        /* Some code for when buttons are clicked */
    }

    render () {
        return (
            <div>
              <Intro />
              {this.state.questions.map((question, questionIndex) => {
                return (<Panel
                question={question}
                answers={this.state.answers[questionIndex]}
                onSelect={this.onSelect} />
              )
            })}
              <Results />
            </div>
        );
    } }

export default App;

或者你可以拥有一个对象数组，其中包含一个名为question的字段和另一个名为answer的对象，只是为了给你另一个想法。

Answer 2

首先，render只能返回一个元素。您应该使用div包装组件。第二，this.state.questions.i是错误的语法。使用this.state.questions[i]。最后，我认为有更好的方法：

return (
  <div>
    <Intro />
    {
      this.state.questions.map((question, i) => {
        return <Panel question={question} answers={this.state.answers[i]} onSelect={this.onSelect} />
      })
    }
    <Results />
  </div>
);

Answer 3

不要为您的班级React
除非您使用React 16，否则需要将所有内容包装在div中（在渲染方法上）
您不需要questionsMap。您可以使用map免费提供的索引，map函数的第一个参数是元素，第二个参数是索引。
在返回之前解构你的问题并在渲染中回答，如下所示：`const { 问题，答案} = this.state;为了便于阅读。
古德勒克

Answer 4

return方法仅预期有1个孩子，在您的示例中，它有3个孩子，即：

简介组件
一组<Panel>的
结果组件。

要解决此问题，最简单的方法是在<div>...</div>标记内封闭

或者在这种额外的div妨碍样式的情况下，您可以将其简单地封装在<>...</>标签内

Answer 5

您尚未正确使用地图功能。

请查看以下代码

import React, { Component } from 'react';

import Panel from './components/Panel';
import Results from './components/Results';
import Intro from './components/Intro';

const questionsMap = [0, 1, 2, 3];

class React extends Component {
    constructor (props) {
        super (props);
        this.state = {
            questions: ['question1', 'question2', 'question3', 'question4'],
            answers: ['answers1', 'answers2', 'answers3', 'answers4']
        }
        this.onSelect = this.onSelect.bind(this);
    }

    onSelect(value) {
        /* Some code for when buttons are clicked */
    }

    render () {
        return (
            <Intro />
            {questionsMap.map((_,i) => {
            return <Panel question={this.state.questions[i]} answers={this.state.answers[i]} onSelect={this.onSelect} />
            })}
            <Results />
        );
    }
}

export default App;

map中的第一个参数是值，第二个参数是index。因为，我们不需要map中的值，所以我把它作为_。

在React中使用不同的道具多次渲染组件

5 个答案: