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

Question

我有一个组件要渲染四次，每次都使用不同的道具。 为了让我的代码更加简洁，而不是每次都为组件及其 props 写出 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 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

1. 不要给你的班级命名React
2. 除非您使用 React 16，否则您需要将所有内容都包装在 div 中（在渲染方法上）
3. 你不需要questionsMap 。 你可以使用该索引map为您提供免费的map功能的第一个参数是元素，第二个将是指数。
4. 在返回之前，在渲染中解构您的问题和答案，如下所示：`const { questions, answers } = this.state; 为了可读性。
5. 好运

Answer 4

return方法只需要 1 个孩子，在您的示例中，它有 3 个孩子，即：

• 介绍组件
• <Panel>的数组
• 结果组件。

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

或者在这个额外的 div 阻碍样式的情况下，您可以简单地包含在<>...</>标签中

Answer 5

问题是你返回的元素不止一个，如果你想返回多个元素，你可以返回多个元素

情况1：

    render () {
        return (
            <>        //<React.fragment //either you the empty tag or the one with React.fragment they are both are valid
                <Intro />
                {questionsMap.map((_,i) => {
                    return <Panel question={this.state.questions[i]} answers= 
                {this.state.answers[i]} onSelect={this.onSelect} />})}
                <Results />
            </>       //</React.fragment> 
        );
    }

案例2：

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

Answer 6

您没有正确使用地图功能。

请检查以下代码

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 中的第一个参数是值，第二个参数是索引。 因为，我们不需要地图的价值，所以我把它作为 _。