javascript - 应用程序中未显示的组件

Question

我正在尝试在反应中构建基本应用程序，但我不明白为什么我在 DOM 中看不到一个组件的信息（称为指令）。有人寻求帮助吗？

应用程序.js：

import React from "react";
import ReactDOM from "react-dom";
import instructions from "./components/instructions/instructions"

class Generator extends React.Component {

  render() {
  return (
    <div className="App">
    <div className="gen-button">
    <instructions />
    <button type="button">generate</button>
      </div>
      <div className="random-number"> 
      <p>0</p>
      </div>
    </div>
    );
  }
}

export default Generator;

和指令组件：

import React from "react";

const instructions = () => {

    return (
        <div>
        <p>Click "generate" for a random number"</p>
        </div>
        );
}

export default instructions;

标签： javascriptreactjs

Answer 1

乍一看，一切似乎都是正确的。然而，在做了两次之后，我注意到你的<instructions/>组件不是以大写字母开头的，这是 React 对自定义组件的期望......

如此处所述

JSX 标记名称约定（小写名称指的是内置组件，大写名称指的是自定义组件）。

因此，如果您将其更改<instructions/>为<Instructions />（在导入、调用、导出和创建中），它将按预期工作。

请查看此演示

希望这可以帮助！