Question

AppFunction.js

export default function myFunction() {
  var str1 = "Hello ";
  var str2 = "world!";
  var res = str1.concat(str2);
  document.getElementById("demo").innerHTML = res;
}

App.js

import React, { Component } from 'react';
import myFunction  from './AppFunction';

class App extends Component {           
  render() {
    return (
      <div className="App">
        <button onclick="myFunction()">Try it</button>
        <p id="demo"></p>
      </div>
    );
  }
}

export default App;

我应该导入一个现有的JavaScript库，然后调用它的函数。

componentDidMount() {
  myFunction()
}

当我这样写时，正在工作。但是无需单击onclick按钮即可在屏幕上显示。我想按一下按钮，然后在屏幕上显示它。

Answer 1

更改

<button onclick="myFunction()">Try it</button>

到

<button onClick={myFunction}>Try it</button>

Answer 2

您应该使用

export default function myFunction() {
  var str1 = "Hello ";
  var str2 = "world!";
  var res = str1.concat(str2);
  return res;
}

和

<button onClick={myFunction}>Try it</button>

如何在reactjs中导入函数

2 个答案: