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

Question

我正在尝试在 React 中构建基本应用程序，但我不明白为什么我在 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;

Answer 1

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

如前所述here

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

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

请检查这个demo

希望这对您有所帮助!