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。所有问题的答案都是相同的，它们是：＆＃34; No＆＃34;，＆＃34;不是＆＃34;，＆＃34;可能＆＃34;，＆＃34;是＆＃34;。 Section元素的表元素和答案的标签都在表格标题中。

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独立的第一个巨大问题：您需要在组件层之间上下传递大量信息。经过一段时间后，它变得如此复杂，以至于你达到了一个你想要关闭的点。

因此，让我们首先讨论如何将业务逻辑与视图组件分开，以便随后可以处理状态更改。

我将使用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注释是什么？猴面包树注释可以被视为听众。所以Home听结构，而Question听取答案。每次通过动作更改侦听属性时（我们只有1个操作 - 应答操作），所有侦听组件都会触发使用新数据的重新渲染。

因此，如果您现在在输入字段上触发单击操作，则会触发应答操作（如果您使用Baobab注释，则调度功能会自动添加到您的组件中。它会将状态绑定到操作（第一个参数）并添加所有其他论据背后。）答案动作会导致答案状态发生变化，从而迫使人们重新回答问题。

免责声明：我没有测试过代码，所以可能有些部分遗失或错误。但我希望您能更深入地了解如何使用React.js（和Baobab）构建应用程序。

Answer 2

在jsx中有一个内联逻辑。有点像

render() {
  let questionIndex = 0
  return ( < div > {
      json.map((element, index) => {
        //Can create jsx according to need
        questionIndex += 1
        return ( < div key = {
            questionIndex
          } >
          < p >
          Question number {
            questionIndex
          } < /p> < Options / >
          < Input / >
          < AnyOtherComponent / >
          < /<div>

        )
      })
    } < /div>

  )

}

如果有帮助，请告诉我。它可能会给你一些提示

在ReactJS中编号子元素

2 个答案: