如何在ReactJs组件中使用外部JavaScript函数？
在ReactJs组件中使用外部JavaScript函数可以通过以下步骤实现：
- 导入外部JavaScript函数：在React组件的顶部，使用import语句导入外部JavaScript函数的文件。例如，如果外部函数定义在"external.js"文件中，可以使用以下代码导入：
import { functionName } from './external.js';- 使用外部JavaScript函数：在需要使用外部函数的地方，直接调用该函数即可。例如，在组件的render()方法中，可以调用外部函数并将其结果渲染到组件中：
render() {
const result = functionName();
return (
<div>{result}</div>
);
}- 理解外部JavaScript函数的作用域：在React组件中使用外部函数时，需要确保外部函数的作用域正确。如果外部函数依赖于组件的状态或属性，可以将其作为组件的方法进行绑定，或者使用箭头函数确保作用域正确。例如，在组件的构造函数中绑定外部函数：
constructor(props) {
super(props);
this.functionName = functionName.bind(this);
}- 注意事项：在使用外部JavaScript函数时，需要确保该函数已正确加载并可供使用。可以通过在组件的生命周期方法中调用外部函数，或者在组件挂载后执行某个操作时调用外部函数。
外部JavaScript函数的使用可以使React组件与其他JavaScript库或函数进行交互，扩展组件的功能和灵活性。
对于ReactJs组件中使用外部JavaScript函数的详细说明和示例，您可以参考腾讯云的React文档：React中使用外部JavaScript函数
相关·内容
我目前正在学习ReactJS。我正在用JSX编写代码，但我有一个问题。如何使用我使用的定期格式化的JavaScript库？
E.g
myScript.js
(function () {
var myTemp = "myTemp";
function myFunction() {
console.log("myFunction()")
}
function myFunction1() {
console.log("myFunction()")
}
function myFunction2() {
c
浏览 0提问于2019-01-23得票数 0
我希望包含jquery.min.js并添加一个外部JavaScript文件，并在现有的react JS文件中调用JavaScript函数。
我在下面做了，但它不起作用
const VoCaaSComponentbtn = (
<React.Fragment>
<div>
<script type="text/javascript"src="https:xxxx/jquery-3.3.1.min.js"></script>
&
浏览 3提问于2020-04-01得票数 5
回答已采纳
我想在index.html中加载，onLoad='someMethod'将调用一个单独的javascript文件中的方法。然后，该方法将打印到控制台。
加载客户端库没有任何问题，但是消息没有从控制台打印出来，我认为这是因为根本没有调用该方法。
这是我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
<
浏览 20提问于2016-05-07得票数 24
回答已采纳
1回答
我有一个函数，在这个函数中，我对一个名为useState的变量使用了一个active钩子。此变量接受一个字符串值，单击该变量获取单击的类别的值。我的目标是在函数之外使用这个类别值，以便对该特定类别执行操作。
是否有一种方法可以导出这个active useState变量所具有的值，在项目中的任何地方都可以导出这个函数。
我的代码结构如下：
export const funct = () => {
// useState variable that will take the value of category that it gets clicked on/
const [act
浏览 4提问于2022-03-30得票数 0
我目前正在做官方的reactJS教程：
我已经喜欢上了reactJS，尽管我还不能完全理解这一切。其中之一就是“道具”。我熟悉OOP，我知道属性是什么。我对继承至少也有一些理解。然而，让我感到困惑的是，“道具”似乎就是从这里冒出来的：
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
};
}
render() {
return (
<button classNa
浏览 1提问于2018-08-16得票数 8
一旦主文件渲染方法完成执行，就需要在reactjs中的另一个javascript文件中导入"validation.js“文件
import './Validations';
应该在主组件的render方法完成执行后呈现此JS文件
浏览 1提问于2019-04-25得票数 0
我只想运行一段javascript代码来查询后端GraphQL服务器。为什么我必须将我的查询包装在一个特殊的组件中？就像里说的。
import { Query } from "react-apollo";
import gql from "graphql-tag";
const ExchangeRates = () => (
<Query
query={gql`
{
rates(currency: "USD") {
curre
浏览 0提问于2018-05-14得票数 2
回答已采纳
1回答
尝试获取组件工作的基本示例。下面的步骤是我所遵循的各种入门指南的组合
按以下方式设置节点依赖项
"dependencies": {
"http-server": "~0.8.0",
"forever": "0.14.1",
"gulp": "^3.9.0",
"gulp-chmod": "^1.2.0",
"gulp-inject": "^1.3.1",
"gul
浏览 1提问于2016-05-26得票数 1
回答已采纳
假设我有一个带有路径app -> taskbar -> button -> modal -> textfield的应用程序。我希望textfield能够设置用户输入，并在应用程序的其他地方使用，例如，app -> differentButton -> differentModal会显示这个用户设置。
我是全新的反应，但似乎数据只能向下通过道具，对吗？是否期望我将此状态外部存储在db中？我不介意这样做，但似乎应该有一个简单的方法来做到这一点，而我却忽略了这一点？
浏览 0提问于2015-12-22得票数 1
回答已采纳
我在React中看到“如果”类型语句不能在JSX代码中使用，因为JSX呈现到javascript中的方式，所以它的效果并不像人们所期望的那样。
但是，实现一个"if“组件是个坏主意，有什么原因吗？从我最初的测试来看，它似乎运行得很好，让我想知道为什么不经常这样做呢？
我的部分意图是允许尽可能多地响应开发，基于标记--尽可能少使用javascript。在我看来，这种方法更像是一种“数据驱动”的方法。
你可以
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JS
浏览 7提问于2014-08-10得票数 61
回答已采纳
3回答
仍然有关于ReactJS =的愚蠢问题)，有什么方法可以添加公共函数来响应组件吗？我试着做这样的事情：
var LoginForm = React.createClass({
getInitialState: function() {
},
render: function() {
},
MyFunc: function () {
}
})
...
var login_form = LoginForm({});
React.renderComponent(login_form, document.body);
...
login_form.M
浏览 3提问于2014-10-05得票数 6
回答已采纳
我试图通过将Match对象传递到我的react组件类中来使用我的url作为参数。然而，它不起作用！我到底做错了什么？ 当我将组件创建为JavaScript函数时，一切都很好，但是当我尝试将组件创建为JavaScript类时，它就不能工作了。 也许我做错了什么？如何将Match对象传递给我的类组件，然后使用它来设置组件的状态？ 我的代码： import React, { Component } from 'react';
import axios from 'axios';
import PropTypes from 'prop-types'
浏览 30提问于2017-07-13得票数 8
回答已采纳
我有一个jQuery灯箱插件：
我无法实现它的on应用程序。在一个简单的html应用程序中，一切都很好，但在反应中却不起作用。大家能帮我解决这个问题吗？谢谢。
在index.html页面中
<title>My website</title>
<link href="simplelightbox-master/dist/simplelightbox.min.css" rel='stylesheet' type='text/css'>
</head>
<body>
浏览 0提问于2018-07-31得票数 0
回答已采纳
我对javascript和reactJS很陌生，而且我被困住了。我有一个javascript文件，我在这里调用REST。该文件如下所示：
var data;
function getDataRequest() {
const request = new XMLHttpRequest();
request.open('GET', "localhost:8080/getData", true);
request.onload = function () {
var data = JSON.parse(this.response);
浏览 1提问于2018-09-05得票数 3
回答已采纳
我想在我的react页面的特定位置包含linkedin follow按钮。如何将下面的标签呈现到div中？
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
<script type="IN/FollowCompany" data-id="xxxxx"></script>
谢谢。
浏览 8提问于2017-08-25得票数 0
2回答
我有一个带有输入的React组件，还有一个可选的“高级输入”：
[ basic ]
Hide Advanced...
[ advanced ]
如果您单击“隐藏高级”，则底部的高级将消失，这将更改为“显示高级”。这很简单，而且运行良好，在状态中有一个showAdvanced键，它控制文本和是否呈现高级输入。
但是，外部JS代码可能会更改advanced的值，在这种情况下，如果高级输入当前处于隐藏状态，并且值不同于默认值，则我希望显示高级输入。然而，用户应该能够单击“隐藏高级”来再次关闭它。
因此，有人从外部调用cmp.setState({advanced: "20"})，然后我
浏览 4提问于2014-09-12得票数 6
回答已采纳
我正在使用一个包含许多js外部文件的模板，我想使用该模板的全部功能，但我不知道如何在reactjs项目中包含js文件。
我现在所做的是将此代码添加到public/index.html文件中，但它不起作用
<script type="text/babel" src="javascript/vendors/jquery-3.2.1.min.js"></script>
<script type="text/babel" src="javascript/vendors/bootstrap.bundle.m
浏览 24提问于2019-04-01得票数 0
1回答
我有功能成分FilterBar -
const FilterBar=()=>{
....
....
useEffects..
states...
function apiCallToFilters()
{
...
...
}
...
..
}
由于不能共享整个代码，所以我已经共享了一个结构和一个方法，我想通过jest来测试它们。
我写了FilterBar.test.tsx -
describe('Filter Bar', () => {
it('All Api Calls', () => {
const wrappe
浏览 5提问于2022-05-11得票数 0
回答已采纳
我的问题是在子组件中，我有一个通过post方法更新的状态，我必须在我的父组件中显示这个状态--这两个组件都是类基组件。
浏览 8提问于2020-10-08得票数 0
回答已采纳
我有一个问题:我想从URL+ImageUrl获得coinData。
在Vue中，我只需在组件中创建一个方法：
getCoinImage: function(symbol) {
return CRYPTOCOMPARE_API_URI + this.coinData[symbol].ImageUrl;
}
然后调用视图模板中的函数，它将返回我正在寻找的图像的完整URL。
我该怎么做呢？
class App extends Component {
constructor(props) {
super(props);
this.state = {
cryptos: [],
浏览 0提问于2017-11-17得票数 2
回答已采纳
代码示例：
材质UI可以平滑地折叠。
但是，当我将JSX放到外部组件时，就会平滑刹车。我制作了带有平滑折叠和没有平滑折叠的代码示例。
如何在外部组件中保留列表并保持平滑折叠？
浏览 1提问于2021-02-06得票数 0
我是第一次接触reactjs。我的render方法每次都会从数据库中获取数据，并停止所有其他活动的运行。它每毫秒获取一次数据，但没有其他功能在运行，比如设置状态etc.how从数据库获取数据，并并行执行其他任务，如设置状态并将数据分配给数据库。我使用的是firestore，所以如何同时从数据库获取数据和将设置数据分配到数据库。 db.collection(this.state.user.email).doc(this.state.hisemail).get().then(docr =>{
// console.log(docr.data())
浏览 25提问于2020-09-02得票数 0
我是ReactJS的新手，我觉得我漏掉了一些基本信息。
我正在处理简单的TODO列表，在那里您单击<li>并将其转移到完成部分。
我有两个包含任务列表的数组，当您单击一个任务<li>时，它将从数组中移除并传输到其他数组。单击后，<ul>将被更新，但不会更新任务所在的位置。
使用它时，您可能会注意到<ul>只在单击时才会更新。如果只单击一个，如何更新<ul>？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
浏览 1提问于2015-12-12得票数 0
回答已采纳
我试图从XML文件中获取XML数据，并希望将某些节点值保存在列表中。我就是这么做的：
import React from "react";
class EditFiles extends React.Component {
constructor(props) {
super(props);
this.loadXML = this.loadXML.bind(this);
}
loadXML = () => {
var xhttp = new XMLHttpRequest();
浏览 1提问于2017-12-14得票数 3
回答已采纳
我在遗留应用程序中有一个由jquery控制的选项卡式接口。
我正在将新部件迁移到ReactJS。
其中一个选项卡保存React根DOM节点，我希望在其中显示组件。当选项卡激活时，DOM节点以及选项卡中的所有内容都将通过jquery加载，其中包含html()函数。在这种情况下，React无法找到DOM节点，并出现错误。
如果我在选项卡激活中使用AJAX动态加载React脚本，那么每次加载脚本时，它都会添加一个重复的根组件。
如果只在第一次激活选项卡时加载脚本，它就无法在第二个选项卡激活之前将组件添加到DOM中。
如何处理动态插入的根DOM节点(v16.2)？
请帮帮我！
浏览 0提问于2018-03-17得票数 0
回答已采纳
我在这里尝试用ReactJS中的组件来创建PopUps，但是我在Reactid-withaddons.js中得到了这个错误：
错误:不变冲突：_registerComponent(.)：目标容器不是DOM元素。
这是我的密码：
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="react-0.13.3/build/react-wit
浏览 1提问于2015-06-22得票数 5
4回答
我有两个组件：App和Contact。我只想在我正在传递的联系人页面上打印id，但是当我在contact组件中console.log(this.props)时，它显示的是一个空对象。
import React from "react";
import Contact from "./Contact";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class App extends React.Component {
render() {
浏览 0提问于2019-10-15得票数 2
回答已采纳
我正在学习如何使用Reactjs，并阅读了以下文章：
当使用componentWillMount时，编写的代码对于服务器呈现(将不使用外部数据)和即将到来的异步呈现模式(可能多次启动请求)都是有问题的。
我不明白：
如何多次启动请求，因为componentWillMount只使用了一次。
为什么componentDidMount解决了这个问题。对于服务器呈现，外部数据也不会在第一个呈现调用中使用。
浏览 1提问于2019-09-11得票数 0
回答已采纳
1回答
我已经在reactjs中设置了一个AMP页面，但是AMP验证器显示了这个错误：
Custom JavaScript is not allowed
但是，我没有在我的页面中使用任何自定义js。我该如何解决这个问题？
浏览 0提问于2019-08-22得票数 0
我的应用程序有一些问题，我不是Javascript专家，但它的接缝很容易修复。我需要打电话给你
this.props.onNavStyleChange(NAV_STYLE_FIXED);
若要在此页加载时更改导航，请执行以下操作。但这会给你带来错误
第13行:解析错误:意外令牌，预期“；
这是完整的代码
import React, { Component, Fragment } from "react";
import { Col, Menu, Icon, Row } from "antd";
import { connect } from "reac
浏览 2提问于2020-03-19得票数 1
在ReactJS应用程序中，我正在构建一个基于HTML表的组件。我给这个表中的一些元素一个ID，并有一个javascript文件，它根据ID处理特定的元素。通过script标记将这样的脚本链接到一个普通的HTML页面很简单，但是在React应用程序中导入这个JS脚本似乎比较困难。
我该怎么做呢？javascript文件是本地的，我知道我想在组件的componentDidMount函数中加载它，因为它需要在创建HTML元素之后加载。
下面是Javascript文件的一个示例：
var weirdTable = weirdTable(document.getElementById('tab
浏览 0提问于2018-02-05得票数 0
我需要获得类的defaultProps要访问的组件的状态，下面是我的代码：
class Headcomponent extends React.Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
formErrors: {
email: '',
pa
浏览 0提问于2018-02-07得票数 1
回答已采纳
我在打字稿中使用ReactJS。我需要下面的“构造器”代码吗？没有它，它工作得很好，我看了一下转换后的JavaScript，它似乎是自动添加的。
interface myProps {
children?: any;
}
class MyButton extends React.Component<myProps, {}> {
constructor(props: myProps) { //Needed ???
super(props);
}
render() {
return (<div>
浏览 5提问于2016-02-16得票数 2
回答已采纳
<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}">
Register
</div>
当mou
浏览 9提问于2011-02-27得票数 0
回答已采纳
我使用React渲染我的web应用程序所需的一些组件，我有一个带有播放和停止按钮的计时器。我从get请求中检索所有的时间记录，并且我想在组件每次更改时重新修改它，我如何做到这一点？
除了使用一个简单的setInterval来调用this.forceUpdate()函数之外，一切都可以正常工作，但这给了我一个警告：
警告:forceUpdate(.)：只能更新安装或安装组件。这通常意味着在未挂载的组件上调用forceUpdate()。这是禁止行动。请检查TimerBox组件的代码。
我的组成部分：
var TimerBox = React.createClass({
displa
浏览 3提问于2017-03-09得票数 0
回答已采纳
1回答
我看过很多关于测试的教程视频，但通常这些测试都是通过道具给组件或使用data-testid=""的。是否有一种测试非导出函数的方法？我读过关于重连线模块的文章，但问题是Jest不会考虑覆盖报告中从重连线中调用的函数。
// Random.js
import React from 'react'
export function sayHi() {
return '';
}
function ListBox() {
function saySecret() {
return '';
}
retu
浏览 11提问于2022-05-25得票数 0
当用户按下按钮时，我有一个动态操作设置为触发。然而，我远远超过了我可以放入文本框的JavaScript的限制。我已经将我作为.js文件的功能上传到应用程序的静态文件共享组件中。
然而，当动态操作触发时，我不知道该如何调用该函数。而且，我的JavaScript依赖于页面上的表单条目，因为它使用这些数据作为变量。
如何将页面设置为能够从外部.js文件调用函数？最好是以一步一步的方式，因为我仍然是非常新的Apex。
浏览 3提问于2020-02-24得票数 0
回答已采纳
1回答
Reactjs屏幕没有呈现
、、、、
我认为问题是在交换机，在反应-路由器的版本或在路由.只有当我在这个类中创建和应用代码时，启动的屏幕才不会呈现并保持白色。我已经更改了react路由器-dom的版本，但是我不知道是什么。在routes.js:的代码下面。
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './compone
浏览 2提问于2022-02-20得票数 0
我有一个reactjs组件：
var com1 = React.createClass({
render: function() {
return (
<a href='#'>This is a text</a>
);
}
});
我想在完成这个组件网的渲染后执行Javascript/Jquery。简单地将Javascript添加到render方法似乎不起作用。
我将如何实现这一点？
浏览 0提问于2015-03-20得票数 19
回答已采纳
我创建了一个组件，想要包装文本输入并为其添加一些功能。 <Input value={this.state.name} /> 在子组件中，在文本输入旁边有一个删除按钮，以便在单击文本时清除文本。 const Input = (props) => {
let textInput = null;
const removeText = (e) =>{
e.preventDefault();
textInput.value = '';
textInput.focus();
}
浏览 18提问于2019-01-05得票数 2
回答已采纳
1回答
大家好，我正在努力学习ReactJS，我想知道为什么每个人都在使用标记来构建表单。
我是说当我使用这个代码时：
import { TextInput, Form, View } from 'react-native'
<Form onSubmit={this.onSubmit}>
<TextInput/>
</Form>
我发现了一个错误：
元素类型无效:预期为字符串(用于内置组件)或类/函数(用于组合组件)，但got:未定义。您可能忘记从定义在其中的文件中导出组件。
或者当我使用这个代码时：
impo
浏览 1提问于2017-09-12得票数 0
回答已采纳
1回答
我对反应有点陌生，而且我正在逐步学习。我面临一个问题，那就是当我试图访问道具中的位置参数时，它会返回undefined。我试图找到解决方案，但是大多数人都写过，我必须在路由器中添加我的组件，但是我正在把它包装在路由器中，但是我仍然没有访问位置参数的权限
export const abcdContainer = withRouter(connect(
mapStateToProps,
mapDispatchToProps
)(abcd));
我试图访问and组件中的位置参数，但问题是其中没有位置参数。谁能告诉我是怎么回事吗？
如果有人知道出了什么问题，请告诉我，我已经花了半天时间
浏览 5提问于2017-07-02得票数 2
回答已采纳
2回答
嗨，我有一个像这样的根代码 <body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<button >Platform</button>
<button >Game</button>
<button >Score</button>
<hr />
<div id="root"></div> index.js代码 import React
浏览 21提问于2019-05-28得票数 0
回答已采纳
1回答
如果这是一个愚蠢的问题，很抱歉，我是JavaScript和React的新手。需要UseCallback来包装回调函数，以避免重新创建函数，因为它是在一个函数组件中定义的，该组件在每次状态改变时都会重新运行。为什么我们不直接在函数组件之外定义回调来避免这个问题呢？ // define handleClick here instead?
// const handleClick ...
function MyComponent() {
// handleClick is re-created on each render
const handleClick = () => { c
浏览 14提问于2021-08-14得票数 0
2回答
我正在学习一个在ReactJS中更新状态的教程。我在教程this.updateLanguage = this.updateLanguage.bind(this)中遇到了这一行，我不明白这是怎么回事。我理解这个和绑定的基础知识，但我从来没有见过它像这样做过。有人能解释一下吗？完整的代码：
var React = require('react');
class Popular extends React.Component {
// constructor to set default state
constructor (props) {
sup
浏览 12提问于2017-12-24得票数 3
回答已采纳
当我更改输入值时，事件处理程序onChangeEvt将丢失“this”.
如何在事件处理程序中获得helloworldComponent实例？
<!--lang:javascript-->
import * as React from 'react';
import * as ReactDom from 'react-dom';
class HelloWorld extends React.Component{
onChangeEvt(e){
console.log(JSON.stringify(this))
浏览 2提问于2016-02-19得票数 0
回答已采纳
我正在尝试在我目前的反应项目中使用bulma日历。我跟踪了文档，但它不起作用。下面是如何在componentDidMount中导入和初始化
import bulmaCalendar from 'bulma-calendar/dist/js/bulma-calendar.min.js';
import 'bulma-calendar/dist/css/bulma-calendar.min.css'
在componentDidMount中，我只是从站点的复制粘贴示例
componentDidMount() {
var calendars = bulmaCalen
浏览 6提问于2019-11-08得票数 0
我正在开发一个reactjs应用程序--我正在分解一个大型组件，以获得一个子组件。我在子函数中创建了一个回调函数，该函数将返回到父函数。当选中复选框时--子组件执行回调，然后返回到父shell --不过，我现在想跳出事件回调，将数据推到原始父函数。
我的应用程序看起来像是流线型的。
var Parent = React.createClass({
onSelect: function(value, flag){
this.updateSelected(value, flag);
}
updateSelected: function(value, flag)
浏览 2提问于2019-09-27得票数 1
回答已采纳
我有一个老项目，我在标签中将所有var存储在.cshtml文件中。
cshtml码
<script type="text/javascript">
var foo = 'foo'
</script>
现在我想在我的新模块中访问这个var。它有反应
render() {
return <div className="vertical-box-column width-280 resizableMenu solutionExplorer">
//want to access foo he
浏览 0提问于2018-03-08得票数 0
回答已采纳
我正在使用codemirror创建一个组件，但我的代码中似乎有错误，因为当我试图更新我的主组件的状态时，应用程序破坏了浏览器，我的研究指向一个无限循环，至少我在尝试调试时可以看到这一点。
我希望你们中有人能帮我解决这个问题，也许是我的错，谢谢。
我的主要组成部分：
import React, { Component, PropTypes } from 'react';
import Editor from '../editor';
import Preview from '../preview';
class Playground extend
浏览 6提问于2016-08-24得票数 4
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
