Question

我正在尝试遍历React中的多个组件。基本上我希望问题循环并转换为类似于https://iteratehq.com/上的失效用户的示例。

以下是组件循环的主页面：

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

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代码之间有一些限制。我不确定在这种情况下是否真的需要。

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

return React.createElement(question, null);

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

Answer 2

以下是您的要求的简单演示。关键是在循环中创建一个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。

试图在React中循环遍历多个组件

2 个答案: