尝试遍历 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 属性的使用。我刚刚将数组中的索引用于演示目的，但建议使用该组件始终唯一的东西。更多关于 here.

Answer 2

React 组件只是函数。 JSX 语法并没有什么特别之处，使用<Component /> 将编译为React.createElement(Component, null)（null，因为没有传递任何道具）。唯一的特殊情况是以小写字母开头的组件，例如<div />。这些编译为React.createElement("div", null)。对于您使用的任何字符串都是如此，因此请注意，<myCustomComponent /> 仍将编译为 React.createElement("myCustomComponent", null)，进而创建一个 myCustomComponent DOM 节点，该节点很可能不存在。

您可以将这些知识应用到您的案例中。您已经在问题列表中进行映射，您需要更改的只是命名约定并呈现问题：

const questions = [Q1Name, Q2Birthday, Q3City, Q4YouReady, Q5Setting, Q6Length, Q7Email];
const QList = questions.map(function(Question){
    return (<Question />);
});

注意：我喜欢在所有组件周围添加()，只是为了在 JSX 和常规 JS 代码之间有一些限制。我不确定在这种情况下是否真的需要它。

或者，您可以将当前map 函数中的return 替换为：

return React.createElement(question, null);

同样，null 代表props 值。如果你想传递一些道具，你可以通过传递一个对象而不是 null 值来做到这一点。传递的对象直接映射到引用的问题组件内的this.props 值。顺便说一句，你可以用上面的方法 <Question prop1={prop1} prop2={prop2} /> 做同样的事情，它仍然可以像使用任何其他 React 组件一样工作。