警告：无效的 DOM 属性“class”。您的意思是“className”吗？- 反应

Question

我是 ReactJS 的新手。据我了解，仅当我使用“class”而不是“className”时，浏览器才会出现以下错误。但我已经搜索过，我的代码中没有“类”这样的词。这个错误背后的原因是什么。我在这里遗漏了什么吗？

render() {
        return (
            <div style={{marginTop: 10}}>
                <h3>Create New Todo</h3>
                <form onSubmit={this.onSubmit}>
                    <div className="form-group">
                        <label>Description: </label>
                        <input type="text"
                               className="form-control"
                               value={this.state.todo_description}
                               onChange={this.onChangeTodoDescription}
                        />
                    </div>
                    <div className="form-group">
                        <label>Responsible: </label>
                        <input
                            type="text"
                            className="form-control"
                            value={this.state.todo_responsible}
                            onChange={this.onChangeTodoResponsible}
                        />
                    </div>
                    <div className="form-group">
                        <div className="form-check form-check-inline">
                            <input className="form-check-input"
                                   type="radio"
                                   name="priorityOptions"
                                   id="priorityLow"
                                   value="Low"
                                   checked={this.state.todo_priority === 'Low'}
                                   onChange={this.onChangeTodoPriority}
                            />
                            <label className="form-check-label">Low</label>
                        </div>
                        <div className="form-check form-check-inline">
                            <input className="form-check-input"
                                   type="radio"
                                   name="priorityOptions"
                                   id="priorityMedium"
                                   value="Medium"
                                   checked={this.state.todo_priority === 'Medium'}
                                   onChange={this.onChangeTodoPriority}
                            />
                            <label className="form-check-label">Medium</label>
                        </div>
                        <div className="form-check form-check-inline">
                            <input className="form-check-input"
                                   type="radio"
                                   name="priorityOptions"
                                   id="priorityHigh"
                                   value="High"
                                   checked={this.state.todo_priority === 'High'}
                                   onChange={this.onChangeTodoPriority}
                            />
                            <label className="form-check-label">High</label>
                        </div>
                    </div>

                    <div className="form-group">
                        <input type="submit" value="Create Todo" className="btn btn-primary"/>
                    </div>
                </form>
            </div>
        )
    }

这些是该项目的其他组件。我在其中找不到任何“课程”

import React,{Component} from "react";

export default class EditTodo extends Component{
    render() {
        return(
            <div>
                <p>Welcome to Edit Todo Component!!</p>
            </div>
        )
    }
}

import React,{Component} from "react";

export default class TodosList extends Component{
    render() {
        return(
            <div>
                <p>Welcome to Todos List Component!!</p>
            </div>
        )
    }
}

Answer 1

我在 App.js 中使用了“class”而不是“className”。我解决了。谢谢