Tag: reactjs

将react.js与chart.js一起使用时，获取“TypeError：document.getElementById（…）为null”: 我正在使用react和chart.js来绘制条形图。但是在chart.js中我们必须使用canvas标签并找到该标签并在其中放置条形图，我们使用普通的document.getElementById()方法。我尝试了很多组合，比如把document.getElementById()放在开头，或放在$(document).ready() ，甚至在react的componentDidMount()方法中。但我仍然得到“ TypeError: document.getElementById(…) is null ”。如果有人知道，请给我一个建议。谢谢。这是我试图执行的代码： var React = require(“react”); var Chart = React.createClass({ getDefaultProps: function() { barChartData = { labels : [“Option1”, “Option2”], datasets : [ { fillColor : “rgba(220,220,220,0.5)”, strokeColor : “rgba(220,220,220,0.8)”, highlightFill: “rgba(220,220,220,0.75)”, highlightStroke: “rgba(220,220,220,1)”, data : [65, 35] } ] } }, onload: function() […]

父组件更改时更新子组件: 我是React js的新手。我有两个问题。我来啦问题1 我想在更新（重新渲染）父组件时更新（重新渲染）子组件。经过一些谷歌搜索，我发现当道具被更改并且我们调用forceUpdate函数时，只更新父组件而不是子组件。如果我想更新子组件，我需要使用setState函数并在状态中设置一些东西来更新子组件。但我面临的问题是，当我在父组件中设置状态时，子组件不会更新。不调用子项的render方法。有人可以告诉我，我做错了什么？ Parent.jsx class Application extends React.Component { isBindEvents=false; componentWillMount(){ let {dispatch} = this.props; dispatch(getCompanyInfo( “abcd.com”, (res) => { // THIS IS A ACTION CALL this.props.user = res.data.user; this.setState({name:res.data.user.name}) this.forceUpdate() })) } render(){ return ( // THIS IS THE CHILD COMPONENT WHICH I WANT TO RE-RENDER […]

如何在reactjs中导入外部javascript（需要jquery）: 首先，我仍然是网络开发的新手。好的，现在回答这个问题。我有这些import： import $ from ‘jquery’; window.jQuery = $; window.$ = $; global.jQuery = $; import ‘./assets/js/waves’; 如果我的外部JavaScript需要jquery，如何正确导入外部javascript到reactjs？因为根据这些家伙说的话： reactjs，bootstrap和npm import – 没有定义jQuery 是否提升了ES6模块的import？我的导入将被挂起，这导致我的外部“ ./assets/js/waves”js导致错误。 Uncaught ReferenceError: $ is not defined? 提前致谢！

Warning.js：45警告：setState（…）：只能更新已安装或安装的组件: 我是js新手我试图使用this.setState（{但我收到警告。你能告诉我为什么我得到以下警告警告.js：45警告：setState（…）：只能更新已安装或安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是一个无操作。请检查PerformanceChartNav组件的代码。提供以下代码： – import React from ‘react’; import {connect} from ‘react-redux’; import moment from ‘moment’; import height from ‘./jump-player-tab-content’; import weight from ‘./jump-player-pane-content’; import AccountSetupTab from ‘./running-setup’; import BalancePortfolio from ‘./balance-portfolio’; class FirstTimeTab extends React.Component { constructor(props) { super(props); this.state = { runningSetup: ‘jump-player-active’, investmentPurchase: ‘sports-invest-ico’, balancePortfolio: ‘sports-balance-ico’, performance: ‘sports-perf-ico’, selectedTab: 0 }; } componentWillMount() […]

在反应路由器重定向上运行jquery脚本: 我希望移植我使用主题的现有网站来利用反应组件。主题有很多function，可以正确渲染UI（包括几个动画）。主题的js导入了很多其他的js库。这意味着我无法编写主题提供的任何UI元素的反应版本。但是，实际的元素可以用作“哑组件”，我不需要任何数据绑定function。我可以在我的public/html文件夹中导入我的js库的依赖项，这不是一个大问题。真正的问题是我的主题库（我将称之为scripts.js）每次使用react-router进行重定向时都不会加载。由于react-router实际上没有重新加载页面，因此我的scripts.js无法知道何时执行其UIfunction。这里的讨论讨论了将scripts.js包装在一个函数中，并在每次在Router级别进行更新时调用它。由于react-router 4没有onUpdate ，我决定订阅历史记录。我这样做是这样的： import {createBrowserHistory} from ‘history’; const history = createBrowserHistory(); history.listen(() => { console.log(“url has changed”); }); export {history}; 现在我能够知道每次路由更改发生时，我现在需要的是实际上让scripts.js “加载”。我的scripts.js很长，其中一些是专有的，所以我只在这里发布它的片段。 mr = (function (mr, $, window, document){ “use strict”; mr = mr || {}; var components = {documentReady: [],documentReadyDeferred: [], windowLoad: [], […]

反应wirh Webpack + Jquery + bootsrap: 我是反应和webpack的新手，我发现错误我无法解决。我懂了： bootstrap.min.js：6 Uncaught Error：Bootstrap的JavaScript需要jQuery 当我尝试在我的项目中导入bootstrap.js时，如下所示： import React from “react”; import ReacrDOM from “react-dom”; import “bootstrap/dist/css/bootstrap.min.css”; import “./assets/css/animate.min.css”; import “./assets/css/light-bootstrap-dashboard.css”; import “./assets/css/demo.css”; import “font-awesome/css/font-awesome.min.css”; import “./assets/css/pe-icon-7-stroke.css”; import $ from “jquery”; import “bootstrap/dist/js/bootstrap.min”; import “./assets/js/bootstrap-checkbox-radio-switch”; import “./assets/js/chartist.min”; import “./assets/js/bootstrap-notify”; import “./assets/js/light-bootstrap-dashboard”; import “./assets/js/demo”; 这是我的webpack.config.js var webpack = require(‘webpack’); var path = require(‘path’); var debug = […]

如何创建html结构，每个li只允许3个div元素。在React + underscore.js中: 为了创建这个结构，我想只使用underscore.js方法。我有下面的数组。 var xyz = [{ ‘name’: ‘test’ },{ ‘name’: ‘test1’ },{ ‘name’: ‘test2’ },{ ‘name’: ‘test3’ },{ ‘name’: ‘test4’ },{ ‘name’: ‘test5’ }]; HTML结构应该像这样创建 – test3 test4 test5 test6 test7 test8 我在我的项目中使用React和underscore.js。

Reactjs：带有reactjs的jQuery自定义内容滚动条: 我试着在这里集成Jquery自定义滚动条插件。这是我的代码 import $ from “jquery”; import mCustomScrollbar from ‘malihu-custom-scrollbar-plugin’; ….. componentDidMount: function() { // fixed sidebar var self = this; mCustomScrollbar($); $(ReactDom.findDOMNode(this.refs.menu_fixed)).mCustomScrollbar({ autoHideScrollbar: true, theme: ‘minimal’, mouseWheel:{ preventDefault: true } }); self.forceUpdate(); }, 我得到这个错误index.jsx：51 Uncaught TypeError：（0，_malihuCustomScrollbarPlugin2.default）不是函数有人可以帮助让它工作谢谢

过滤React Js中的Todo列表: 我是React的新手（我以前习惯使用Angular），我目前正在根据类别选择过滤我的Todo列表应用程序。我从http://todomvc.com/examples/react/#/克隆了Todo列表应用程序。我添加了一个“类别”输入，它可以工作，但是现在我尝试在显示列表后按类别进行过滤。我目前没有任何类别搜索function，我正在寻找一些指导，从哪里开始。我将发布下面的代码，但如果你想要克隆它，这里是我的repo的链接： https ： //github.com/aenser/todo-react app.jsx var app = app || {}; (function () { ‘use strict’; app.ALL_TODOS = ‘all’; app.ACTIVE_TODOS = ‘active’; app.COMPLETED_TODOS = ‘completed’; var TodoFooter = app.TodoFooter; var TodoItem = app.TodoItem; var ENTER_KEY = 13; var TodoApp = React.createClass({ getInitialState: function () { return { nowShowing: app.ALL_TODOS, editing: null, […]

将jQuery加载到React App的Mocha测试中: 我已经创建了一个类似于本教程中概述的Mocha测试设置： https ： //github.com/jesstelford/react-testing-mocha-jsdom 。我想知道如何将jQuery加载到这个结构中。我把它作为require(‘jquery’)测试JS文件包含在内，但是当我调用$.ajax ，它会给出一个错误，说明TypeError: Attempted to wrap undefined property ajax as function 。我怀疑这是因为Node没有在浏览器中运行我的JavaScript。但是，我尝试过使用窗口环境，但仍然没有运气。我知道传统的方法是在HTML标签中包含jQuery，但我不知道如何在这里做，因为我没有HTML文件。