在create-react-app项目中引入并使用自定义JS组件的方法咨询

调整步骤 #

1. 修改fortune.js文件 #

你当前的自定义组件存在3处需要修正的问题：

• React规定自定义组件名必须首字母大写，小写开头会被识别为原生HTML标签
• 组件文件中不需要写ReactDOM.render逻辑，这是项目入口index.js的专属渲染代码
• 组件需要导出才能被其他文件引入使用

修改后的完整fortune.js代码：

import React from 'react';
// 组件名改为大写开头
function Fortune() {
  const message = () => {
    alert("Hello");
  }

  return (
    <button onClick={message}>Click Here</button>
  );
}
// 导出组件
export default Fortune;

2. 修改App.js文件 #

调整引入逻辑，直接在你想要展示组件的位置插入<Fortune />标签即可，示例中我们替换掉你之前写的原生按钮：

import logo from './logo.svg';
import './App.css';
// 引入修正后的Fortune组件
import Fortune from './fortune.js' ;

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Wowsersssss
        </p>
        {/* 插入自定义组件，可放在任意你想要的位置 */}
        <Fortune />
      </header>
    </div>
  );
}

export default App;

修改完成后重启项目即可看到组件正常运行，点击按钮会弹出对应提示。

内容的提问来源于stack exchange，提问作者Jason D