reactjs - ReactJS 中的子元素编号

Question

我是 React 新手，我对它应该如何工作感到困惑。

我想制作一个包含问题、部分和总计部分的小型评估应用程序。

我在主页组件中标记了我想要的内容，如下所示:

export default class Home extends React.Component {
    public render() {
        return <SurvivalTest>
            <Section title="Requirements">
                <Question>
                    Does the project have a clear, unambiguous vision statement
                    or mission statement?
                </Question>
                <Question>
                    Do all team members believe the vision is realistic?
                </Question>
                <Question>
                    Does the project have a business case that details the
                    business benefit and how the benefit will be measured?
                </Question>
            </Section>
            <Section title="Planning">
                <Question>
                    Does the project have a detailed, written Software
                    Development Plan?
                </Question>
                <Question>
                    Were the schedule and budget estimates officially updated
                    at the end of the most recently completed phase?
                </Question>
                <Question>
                    Does the project have detailed, written architecture and
                    design documents?
                </Question>
            </Section>
            <TotalsSection />
        </SurvivalTest>;
    }
}

每个问题有 4 个可能的答案，得分为 0-3。所有问题的答案都相同，分别是:“否”、“不是真的”、“可能”和"is"。部分组件、表格元素和答案标签位于表格标题中。

export class Question extends React.Component {
    constructor() {
        super();
        this.state = { score: 0 };
    }

    public render() {
        return <tr>
            <td>
                <input name={'q' + ???} type="radio" onClick={() => this.setState({ score: 0 })} checked={this.state.score === 0} />
            </td>
            <td>
                <input name={'q' + ???} type="radio" onClick={() => this.setState({ score: 1 })} checked={this.state.score === 1} />
            </td>
            <td>
                <input name={'q' + ???} type="radio" onClick={() => this.setState({ score: 2 })} checked={this.state.score === 2} />
            </td>
            <td>
                <input name={'q' + ???} type="radio" onClick={() => this.setState({ score: 3 })} checked={this.state.score === 3} />
            </td>
            <td>
                {??? + '. ' + this.props.children}
            </td>
        </tr>;
    }
}

如何自动为问题编号？我想在问题文本之前显示一个问题编号，并且我还想根据问题编号命名输入字段(例如 q1、q2 等)

每个问题组件是否可以向其父(部分)组件询问其问题编号？

Answer 1

使用react.js是不错的选择;-)

您遇到了独立的react.js的第一个大问题:您需要在组件层之间向上和向下传递大量信息。随着时间的推移，它会变得如此复杂，以至于你会达到一个你只想把它搞砸的地步。

因此，我们首先讨论如何将业务逻辑与 View 组件分离，以便您可以处理状态更改。

我将使用 React Baobab 来处理应用程序状态。

// state.js
import Baobab from "baobab";

const state = new Baobab({
    name:      "MySurvivalTest",
    structure: {
        sections: [{
            id:        0
            title:     "MyFirstSection",
            questions: [{
                id:    0,
                items: [{
                    id:    0,
                    name:  "q1",
                    value: 0
                }]
            }]
        }]
    },
    answers: []
});

export default state;

这是存储所有应用程序数据的位置。在我的示例中，您的测试包含一个部分，其中一个问题包含一项，但尚未回答任何问题(答案为空)。

在构建组件之前，让我们构建应用程序逻辑。

// actions/Question.js
export const answer = (state, questionId, value) => {
    state.select("answers").set(
        state.get("answers")
            .filter(x => x.questionId !== questionId)
            .concat([{ questionId, value }])
    );
};

Question.answer 函数将答案添加到前面提到的状态。

现在是时候非常快速且一致地构建组件了。

import React, { Component } from "react";
import { branch as BaobabBranch } from "baobab-react/higher-order";
import PropTypes from "prop-types";

@BaobabBranch({
    structure: ["structure"]
})
export default class Home extends Component {
    static propTypes = {
        structure: PropTypes.object.isRequired,
        answers:   PropTypes.array.isRequired
    };

    public render() {
        return (<SurvivalTest>
            { this.props.structure.sections.map(section =>
                <Section
                    title={section.title}
                >
                { section.questions.map(question => 
                    <Question structure={question} />
                )}
                </Section>
            )}
        </SurvivalTest>);
    }
}

import React, { Component } from "react";
import { branch as BaobabBranch } from "baobab-react/higher-order";
import PropTypes from "prop-types";
import { answer } from "../actions/Question";

@BaobabBranch({
    answers: ["answers"]
})
export default class Question extends Component {
    static propTypes = {
        question: PropTypes.object.isRequired,
        dispatch: PropTypes.func.isRequired,
        answers:  PropTypes.array.isRequired
    };

    onClick(id, event) {
        this.props.dispatch(answer, id, value);
    }

    public render() {
        return this.props.question.items.map(item => 
            <tr>
                <td>
                    <input
                        name={item.name}
                        checked={this.props.answers.find(x => x.questionId === this.props.question.id).value === item.value}
                        onClick={this.onClick.bind(this, this.props.question.id, item.value)}
                    />
                </td>
            </tr>
        );
    }
}

好的，这是很多输入。那么Baobab注释是什么？ Baobab 注解可以看作是一个监听器。所以Home听结构，而Question听答案。每次操作更改监听属性时(我们只有 1 个操作 - 应答操作)，所有监听组件都会触发新数据的重新渲染。

因此，如果您现在在输入字段上触发单击操作，则会触发应答操作(如果您使用 Baobab 注释，则调度函数会自动添加到您的组件中。它将状态绑定(bind)到操作(第一个参数)并添加后面的所有其他论点。)。答案操作会导致答案的状态发生变化，然后强制重新呈现问题。

免责声明:我尚未测试代码，因此某些部分可能丢失或错误。但我希望您能更深入地了解如何使用 React.js(和 Baobab)构建应用程序。