将运行简单 js 脚本的组件添加到 create-react-app 应用程序

Question

您好这看起来应该很简单，但无论我搜索多少次，我似乎都找不到明确的答案，或者我只是从根本上误解了一些东西。我想添加一个简单的组件。

我有一个简单的 React 应用程序，这里是 app.js

import logo from './logo.svg';
import './App.css';
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>
      
      <button onclick="myFortune()">Fortune</button>
      </header>
    </div>
  );
}

export default App;

以及我正在导入的一个简单组件

import React from 'react';
import ReactDOM from 'react-dom';
function fortune() {
  const message = () => {
    alert("Hello");
  }

  return (
    <button onClick={message}>Click Here</button>
  );
}

ReactDOM.render(<fortune />, document.getElementById('root'));

我现在如何将其插入 app.js？

如果有人能告诉我在哪里添加它，我将不胜感激。

谢谢！

Answer 1

你的代码好像弄错了。 App 应该是附加到 DOM 中主要反应元素的组件（通常），然后您导入新组件。另外，新组件的名称应该写成 Pascal Case 否则你会得到错误。

所以我在这里创建了一个 MyFortune 组件，并将其导入 App。

function MyFortune() {

  function message() {
    console.log('Hello');
  }

  return (
    <button
      onClick={message}
    >Click Here
    </button>
  );

}

// export default MyFortune;

// import MyFortune from './MyFortune';

function App() {
  return (
    <div>
      <header>
        <p>Wowsersssss</p>
        <MyFortune />
      </header>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

您需要导出组件本身，以便导入它。您还需要将组件的函数名称大写。

import React from 'react'

function Fortune(){
  function clicked(){
   console.log('clicked')
   }
return(
 <button onClick={clicked}>I am a button</button>
)
}

export default Fortune


*//////////////*

import Fortune from './Fortune' 
//Assuming they're in the same folder level

//You can Display it by Declaring it inside the <> just like meta tags do
<Fortune />

您可以向组件添加一个 onlick 函数，但该函数必须在 return 语句之上（如果复杂）或者可以是 JSX return 部分的单行代码。请注意，React 在调用时对这些函数使用 pascal Case，例如 onClick 而不是 onclick，className 不是 className。

将运行简单 js 脚本的组件添加到 create-react-app 应用程序

Adding component that runs a simple js script to create-react-app app

javascript

github

github-pages

reactjs