为什么我在控制台中收到这样的警告，即标签按钮在此浏览器中无法识别答案

【问题标题】：Why I got such an warning into the console i.e The tag buttton is unrecognized in this browser为什么我在控制台中收到这样的警告，即标签按钮在此浏览器中无法识别
【发布时间】：2020-09-27 16:16:15
【问题描述】：

这是我的代码

const templateOne = <div>
    <h1>{app.heading}</h1>
    <p>{app.subHeading}</p>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
    </ol>
    <form>
        <input type="text"></input>
        <buttton>addOptions</buttton>
    </form>
</div>

ReactDom.render(templateOne, document.getElementById('root))

然后我收到警告，即 react-dom.development.js:82 警告：此浏览器中无法识别标签。如果您打算渲染一个 React 组件，请在按钮、表单、div 中以大写字母开头其名称

【问题讨论】：

带有三重 t 的按钮？
错误信息可能不更清楚。 React 组件需要以大写字母开头。所以templateOne --> TemplateOne

标签： reactjs

【解决方案1】：

更正<button>的拼写

伙计，我也先收到了同样的警告..

问题是所有 react 组件都应该以大写字母开头。

如果你把templateOne改成TemplateOne应该没问题。

这里也改一下。

ReactDom.render(TemplateOne, document.getElementById('root))

警告应该消失。

【讨论】：

如果此答案有帮助，请将其标记为 已接受的答案。这对我来说意义重大

【解决方案2】：

更新代码：-

const MyComponent = <div>
    <h1>{app.heading}</h1>
    <p>{app.subHeading}</p>
    <ol>
        <li>Item One</li>
        <li>Item Two</li>
    </ol>
    <form>
        <input type="text"></input>
        <button>addOptions</buttton>
    </form>
</div>


ReactDom.render(MyComponent, document.getElementById('root));

如果组件是用小写字母创建的，react 会把它当作一个普通的 Html 标签。因此，请始终以大写字母开头创建组件。

【讨论】：