javascript - 尝试遍历 React 中的多个组件

Question

我正在尝试循环遍历 React 中的多个组件。本质上，我希望问题能够像 https://iteratehq.com/ 上的 Lapsed User 示例一样循环和转换。 .

这是组件将循环的主页面:

import React from 'react';
import Q1Name from './questions/Q1Name';
import Q2Birthday from './questions/Q2Birthday';
import Q3City from './questions/Q3City';
import Q4YouReady from './questions/Q4YouReady';
import Q5Setting from './questions/Q5Setting';
import Q6Length from './questions/Q6Length';
import Q7Email from './questions/Q7Email';



class SignUpPage extends React.Component {
    render() {
        const questions = [Q1Name, Q2Birthday, Q3City, Q4YouReady, Q5Setting, Q6Length, Q7Email];
        const QList = questions.map(function(question){
            return {question};
        });
        return (
            <div className = "container-fluid">
                <div className = "question-box">
                    <Q1Name />
                </div>
            </div>
        );
    }
}

export default SignUpPage;

下面是我想引入的示例组件 - 请注意每个问题都略有不同。他们接受姓名、电子邮件(经过验证)、城市、生日(日期形式)和各种按钮回答选项。

import React from 'react';

class Q1Name extends React.Component {
    render() {
        return (
            <div className="questions">
                <h1 id="question-h1">What is your name?</h1>
                <form>
                    <div className="form-group">
                        <input type="name" className="form-control text-form custom-form" id="yourNameHere" aria-describedby="name" placeholder="" />
                    </div>
                    <button type="submit" className="btn btn-custom btn-lg" onClick={console.log("hallo")}>Next Question!</button>
                </form>
            </div>
        );
    }
}

export default Q1Name;

除了这部分，我已经能够让其他一切正常工作。任何帮助将不胜感激!!

Answer 1

这是您的要求的简单演示。关键是在循环中创建一个 JSX 元素(<Component />)，然后通过 render 返回结果。方法。

class A extends React.Component {
  render() {
    return <div>I'm A, with {this.props.testProp}</div>;
  }
}

class B extends React.Component {
  render() {
    return <div>I'm B, with {this.props.testProp}</div>;
  }
}

class App extends React.Component {
  render() {
    const components = [A, B];
    const componentsToRender = components.map((Component, i) => (
      <Component key={i} testProp="testProp"/>
    ));
    return <div>{componentsToRender}</div>;
  }
}
ReactDOM.render(<App />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

注意特殊 key 的用法prop，在循环中创建组件时。我只是出于演示目的使用了数组中的索引，但建议使用该组件始终唯一的索引。更多关于 here .