Tag: reactjs

ReactJS输出将不呈现给HTML，但在控制台日志中起作用

我有一个search框，更新this.state.chebi_results与一个JSON对象onSubmit（）。 一切似乎工作，除非我尝试呈现输出到HTML。 我试图把我的输出呈现为一个无序列表。 我的控制台日志显示正是我想要的。 为什么HTML不被更新？ chebiResults=()=>{ return( <div className='search_results'> <ul> {this.state.chebi_results.forEach((element)=>{ <li>{element.name}</li> console.log(element.name) })} </ul> </div> ); } render(){ return ( <div className='ontology_tool'> <div className='wraper'> <div className='search'> <div className='search_tool'> <form onSubmit={this.handleSearch}> <input type="text" name="query" value={this.state.form_query} onChange={this.setQuery}/> <input type="Submit" value="Submit" /> </form> </div> {this.chebiResults()} </div> <div className='selected'> </div> </div> </div> ); }

对于React组件，<img>中的.jpg模块parsing失败？

我想在我的网站上显示一个图像，我正在使用反应。 这里是组件源代码： import React, { Component } from 'react'; import style from './styles/AboutMeStyle.css'; export default class AboutMe extends Component{ render(){ return ( <div> <img src={require ('./images/ProfilePic.jpg')}align="middle"/> </div> ); } } 该文件似乎被发现，但我不断收到一个exception，说明模块parsing失败…？ 这里是来自terminal的错误的文本输出： Module parse failed: /Users/megan/Desktop/Personal Website/client/components/images/ProfilePic.jpg Unexpected character (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character (1:0) […]

event.target.value对于包装图像而不是文本的button是未定义的

我有两个相同的button，除了里面有一个图像，另一个有文本。 我已经添加了一个onClick事件处理程序。 图像button的event.target.value是未定义的，尽pipe有一个值，文本button具有正确的值。 看这个小提琴的例子： https : //jsfiddle.net/69z2wepo/84885/ class MyComponent extends React.Component { constructor(props) { super(props); this.changeSlide = this.changeSlide.bind(this); } changeSlide(e) { e.preventDefault(); console.log('e.target.value', e.target.value); } render() { return ( <div> <button onClick={this.changeSlide} value="back"> <img src="//www.gravatar.com/avatar/7150a453468d14f599772cd8330fcf25/?default=&s=80" alt="Previous slide" /> </button> <button onClick={this.changeSlide} value="back"> CLICK ME </button> </div> ); } } ReactDOM.render( <MyComponent />, document.getElementById('container') ); 为什么会出现这种情况，在button中使用图像的正确方法是什么？

在React Redux中从package.json获取版本号

编辑：如果有其他人遇到这个，应用程序创build使用create-react-app ，它限制导入到src文件夹内，但是如果你升级react-scripts到v1.0.11它可以让你访问package.json。 我试图从我的应用程序中获取package.json的版本号。 我已经尝试了这些build议 ，但没有人工作，因为我不能从src文件夹外部访问package.json（可能是由于React，我是新来的）。 将package.json移动到src中意味着我不能运行npm install ， npm version minor和npm run build从我的根文件夹npm run build 。 我已经尝试使用process.env.npm_package_version但导致未定义。 我正在使用Jenkins，我还没有设置它来推动提交，但我唯一的想法是从GitLab中的标签获取版本，但我不知道如何做到这一点，会增加不必要的依赖回购，所以我真的想find一个替代品。 编辑：我的文件结构是这样的： –> RootAppFolder |–> build |–> node_modules |–> public |–> src |–> Components |–> Root.js | |–> package.json 所以要从Root.js访问package.json，我必须import packageJson from './../../package.json' ，然后出现以下错误： ./src/components/Root.js 找不到模块：您试图导入不在src /目录下的./../../package.json文件。 src /之外的相对导入不受支持。 您可以在src /中移动它，或者从项目的node_modules /中为它添加一个符号链接。

如何pipe理多个节点项目？

我们正在使用3个不同的节点项目： 项目1 ， 项目2和项目3使用react和webpack 。 所有3个项目都在3个不同的仓库中。 项目1和项目2是独立的，但项目3需要项目1和项目2的压缩文件，并作为devDependencies（node_modules）放在项目3中。 现在，我们需要在Project 1或Project 2中进行更改，以便在Project 3中使用新的zip文件。 为了debugging，我们需要更改Project 1或Project 2中的代码，然后使用npm pack一个压缩文件，然后在Project 3中更新该压缩文件并停止Project 3的生成 ，然后再次卸载并安装该压缩文件，然后运行项目3再次。 另一个更快一点，一个解决scheme是使用npm包构build项目1或项目2 ，然后复制生成的lib文件，然后将其复制到项目3运行实例中的/node_modules/Project 1(or2)/lib文件夹中。 有没有更好或更快或更方便的方法来pipe理所有这些项目？ 请不要build议lerna 。 莱纳是一个伟大的工具，但它需要改变的架构是不可行的。

有没有可能使用反应/ Redux /佐贺应用程序没有后端

以前我用React / Redux / Saga作为Ruby / Rails和Nodejs后端应用程序的“performance层”。 目前有几个后端服务（我不控制），我应该使用我的React / Redux / Saga应用程序进行身份validation和获取数据。 在我的本地机器上，我可以在webpack-dev-server的帮助下运行我的React / Redux应用程序，因此它可以接收来自浏览器的请求。 但生产环境呢？ 是否有可能不使用Nginx，Nodejs，Rails部署React / Redux / Saga应用程序？

响应路由与URL参数不更新视图

我有一个反应观点/wiki/:artical 。 当我从一个不同的视angular去维基（例如从/到/wiki/some-artiacal ）我的观点更新，但是当我从一个维基到另一/wiki/some-artiacal （例如/wiki/some-artiacal到/wiki/some-other-artiacal ）页面不会与新的内容。 看来React认为它们是相同的观点，并且不会重新渲染页面。 如果我手动刷新浏览器，文章更新，但是当我点击<Link to='/wiki/some-other-artiacal'></Link>时，我想要刷新。 反应路由器文件： import React from "react"; import ReactDOM from "react-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; // COMPONENTS import Header from './components/Header'; // VIEWS import HomePage from './views/HomePage'; import WikiPage from './views/WikiPage'; import ProblemTesterPage from './views/ProblemTesterPage'; import NoMatchPage from './views/NoMatchPage'; ReactDOM.render( <Router> <div […]

如何模块化JavaScript类（将方法拉出主文件，将方法导入主文件）

是否有可能从JS中的类拉类方法？ 原谅我，我是function范式，所以使用React迫使我使用类和this关键字（到目前为止）。 我的一些组件越来越大，我不想要这个。 我无法在Google上find任何有关拉出方法或模块化课程的内容。 有没有一种方法，我可以说“ 从./some_method.js'获取此方法，并使用它，如果它是在这个文件＆类中声明 ”没有太多的侵入性的变化？ 如果做不到这一点，我假设他们把所有的function都传递给他们。 但是，这感觉很肮脏。 我会感谢一些指导我需要看什么关键字，或者只是如何移动方法，所以我没有2000行文件，需要我20分钟find toggleFullMenu() { this.setState({ menuOpen: !this.state.menuOpen}) } 不用按CTRL + F。 这是我的动力。 我也想知道是否有关于这个与build设者有关的专业技巧。 任何类inheritance范式的警告？ 我只是想让方法独立地坐在不同的文件中，但我不知道我在找什么。 我从来没有见过人们在谈论这个。 编辑，我刚刚在MDN中发现： 子类与扩展 extends关键字用于类声明或类expression式中，以创build另一个类的子类。 来源： https ： //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes class Dog extends Animal { speak() { console.log(this.name + ' barks.'); } } 这是我需要的吗？ 我将如何去拉动一堆扩展？ 我不想要一个小孩课，听起来不像我所描述的那样。

asn1中意外的令牌（len）

我发布这主要是为了别人的好处，因为花了几个小时的研究来深入研究这个问题，我不认为它是与我们的应用程序隔离的。 我最近重新安装了所有npm包在我们的babelified应用程序，并开始在构build过程中出现错误，如“意外的令牌（len）”。 经过相当多的挖掘，我开始findconst，让一个名为asn1.js的包。

通过webpack为不同的环境加载url常量

我有webpack.config.js文件： 'use strict'; var webpack = require('webpack') var env = process.env.NODE_ENV var API_URL_1 = { production: JSON.stringify('http://xyz:8000/api/v1/var'), development: JSON.stringify('http://192.168.99.102/api/v1/var') }; var API_URL_2 = { production: JSON.stringify('http://xyz:8000/api/v1/ui'), development: JSON.stringify('http://192.168.99.102/api/v1/ui"') }; var API_URL_3 = { production: JSON.stringify('http://xyz:8000/api/v1/data'), development: JSON.stringify('http://192.168.99.102/api/v1/data') }; var API_URL_4 = { production: JSON.stringify('http://xyz:8000/api/v1/calculated'), development: JSON.stringify('http://192.168.99.102/api/v1/calculated') }; var config = { module: { loaders: [ […]