javascript - 为 JSX 元素节点生成唯一的 id - React

Question

此刻有点头疼。我使用 React 创建了一个测验平台，目前，我有一个问题组件，它使用 ，您可以在其中添加任意数量的 's。但是，当我将测验提交到服务器时，我想让这些答案具有唯一的 ID（还没有那么远）。

在我尝试使用 {this.props.qNo} 的地方出现错误：“this: this '...' expected ts(1005)”

谁能告诉我我做错了什么？可能是我想象的愚蠢的东西！

单个答案组件

import React from 'react';

class AnswerText extends React.Component {
    constructor(props){
        super(props);
    }



    render(){
        return (
            <div className="input">
                <label htmlFor="answer1">Answer {this.props.qNo}</label>
                <input name="answer1" type="text" id="answer"{this.props.qNo}></input>
                <input type="checkbox" name="answerCheck" id="answerCheck" ></input>
            </div>
        )
    }
}
export default AnswerText;

AddText问题代码

import React from 'react';
import '../css/addQuestion.css';
import AnswerText from './answerText.js';

class AddTextQuestion extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            noAnswers: 0
        }
        this.addAnswer = this.addAnswer.bind(this);
    }

    addAnswer(){
        this.setState({
            noAnswers: this.state.noAnswers + 1
        })
    }

    render(){

        let answers = [];
        for(let i = 0; i < this.state.noAnswers; i++){
            answers.push(<AnswerText key={i} qNo={i + 1} />)
        }

        return (
        <div className="qContainer">

            <form className="addQForm">
                <div className="questionContainer containers">
                        <h3 className="qNo">Question {this.props.qNo}</h3>
                        <div className="input">
                            <label htmlFor="question">Question</label>
                            <input name="question" type="text" id="question"></input>
                        </div>
                </div>
              
                <div className="answerContainer containers">
                    <button type="button" onClick={this.addAnswer}><i className="material-icons">add</i> Answer</button>
                    {answers}
                </div>
            </form>
        </div>
        );
    }
}

export default AddTextQuestion;

任何人都可以帮忙吗？

谢谢

Answer 1

我想你想做的是

 <input name="answer1" type="text" id={`answer${this.props.qNo}`}></input>

有没有可能id="answer"{this.props.qNo}把一切都扔掉？