Questions tagged «reactjs»

我正在使用react-router开发一个React应用程序。我有一个项目页面，其URL如下： myapplication.com/project/unique-project-id 当项目组件加载时，我从componentDidMount事件触发了对该项目的数据请求。我现在遇到一个问题，如果我直接在两个项目之间切换，那么只有id会这样改变... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount不会再次触发，因此不会刷新数据。我是否应该使用另一个生命周期事件来触发我的数据请求，或者使用其他策略来解决此问题？

97 reactjs  react-router 

这个简单的事情应该很容易完成，但是我要把它弄复杂。 我要做的就是动画化React组件的安装和卸载。到目前为止，这是我尝试过的方法，以及每种解决方案都不起作用的原因： ReactCSSTransitionGroup -我根本不使用CSS类，因为它全都是JS样式，所以这行不通。 ReactTransitionGroup-这个较低层的API很棒，但是它要求您在动画完成后使用回调，因此仅使用CSS过渡在此处无效。总会有动画库，这引出下一点： GreenSock-许可证对于IMO的商业用途过于严格。 React Motion-这看起来很棒，但是TransitionMotion对于我需要的东西却非常混乱和过于复杂。 当然，我可以像Material UI一样做一些技巧，在其中呈现元素但保持隐藏（left: -10000px），但我宁愿不走那条路。我认为它很笨拙，并且我希望卸下我的组件，以便它们清理并不会弄乱DOM。 我想要一些易于实现的东西。在安装时，为一组样式设置动画；卸载时，为一组相同（或另一组）样式设置动画。做完了 它还必须在多个平台上都具有高性能。 我在这里撞墙了。如果我缺少某些东西，并且有一种简单的方法可以做到，请告诉我。

97 animation  reactjs  css-animations  greensock  react-motion 

我想制作一个可拖动（即可以通过鼠标重定位）的React组件，该组件似乎必然涉及全局状态和分散的事件处理程序。我可以在JS文件中使用一个全局变量来以肮脏的方式进行操作，甚至可以将其包装在一个不错的闭包接口中，但是我想知道是否有一种方法可以更好地与React结合。 另外，由于我以前从未在原始JavaScript中完成过此操作，所以我想看看专家是如何做到的，以确保我处理了所有极端情况，尤其是与React相关的情况。 谢谢。

97 javascript  reactjs 

我试图将类名传递给react组件以更改其样式，并且似乎无法正常工作： class Pill extends React.Component { render() { return ( <button className="pill {this.props.styleName}">{this.props.children}</button> ); } } <Pill styleName="skill">Business</Pill> 我试图通过传递具有相应样式的类的名称来更改药丸的样式。我是React的新手，所以也许我做的方式不正确。谢谢

97 javascript  reactjs 

如何在ReactJS中手动触发click事件？当用户单击element1时，我想自动触发对input标签的单击。 <div className="div-margins logoContainer"> <div id="element1" className="content" onClick={this.uploadLogoIcon}> <div className="logoBlank" /> </div> <input accept="image/*" type="file" className="hide"/> </div>

97 html  reactjs 

最近，我一直在研究有关Facebook JavaScript库React.js的功能和使用方法。当其差异说话的JavaScript的世界往往是两种编程风格的休息declarative和imperative被mentionned。 两者有什么区别？

97 reactjs 

我是React.js库的新手，我正在浏览一些教程，发现了： this.setState this.replaceState 给出的说明不是很清楚（IMO）。 setState is done to 'set' the state of a value, even if its already set in the 'getInitialState' function. 同样， The replaceState() method is for when you want to clear out the values already in state, and add new ones. 我先尝试this.setState({data: someArray});然后this.replaceState({test: someArray});再进行console.logging它们，发现state现在同时具有data和test。 然后，我尝试this.setState({data: someArray});依次输入“ this.setState({test: …

96 javascript  frontend  reactjs 

我已经用React.js和webpack建立了一个网站。 我想在网页中使用Google字体，因此将链接放在该部分中。 Google字体 <link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"> 并设置CSS body{ font-family: 'Bungee Inline', cursive; } 但是，它不起作用。 我怎么解决这个问题？

96 reactjs  webpack  google-font-api 

我是ReactJs的新手。这是我的代码： var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); 并使用webpack进行编译。我也将Main组件添加到了别名中。控制台抛出以下错误： 我也阅读了以下链接： React Router失败的道具“历史记录”，未定义 未定义值时，如何解决历史记录标记为必需的问题？ 升级React-Router并将hashHistory替换为browserHistory 和网络上的许多搜索，但我无法解决此问题。React Router是版本4

96 reactjs  react-router 

在此React文档中，据说 thinCompare对当前props和nextProps对象以及当前状态和nextState对象执行浅层相等性检查。 我无法理解的是，如果它浅薄地比较对象，则shouldComponentUpdate方法将始终返回true，因为 我们不应该改变国家。 如果我们不改变状态，则比较将始终返回false，因此shouldComponent更新将始终返回true。我对它的工作方式以及如何将其覆盖以提高性能感到困惑。

96 javascript  reactjs 

我试图弄清楚如何切换活动类onClick以更改CSS属性。 我采取了许多方法，并阅读了许多SO答案。使用jquery会相对简单，但是，我无法弄清楚使用react来做到这一点。我的代码如下。谁能建议我该怎么做？ 如果不为每个项目创建新组件，是否可以这样做？ class Test extends Component(){ constructor(props) { super(props); this.addActiveClass= this.addActiveClass.bind(this); } addActiveClass() { //not sure what to do here } render() { <div> <div onClick={this.addActiveClass}> <p>1</p> </div> <div onClick={this.addActiveClass}> <p>2</p> </div> <div onClick={this.addActiveClass}> <p>3</p> </div> </div> } }

96 javascript  reactjs 

在发布此问题之前，我曾尝试在sqa stackexchange中进行搜索，但未找到有关浅层和渲染的文章，因此希望有人能在这里为我提供帮助。 什么时候应该在测试反应组件时使用浅层渲染？根据airbnb文档，我对两者的区别提出了一些意见： 由于浅层将组件作为一个整体进行测试，因此应将其用于“父级”组件。（例如桌子，包装纸等） 渲染用于子组件。 我问这个问题的原因是，我很难确定应该使用哪一个（尽管文档说它们非常相似） 那么，我怎么知道在特定情况下使用哪个呢？

95 testing  meteor  reactjs  chai  enzyme 

我已经在移动应用程序和Web应用程序中使用了ECMAScript 6和ECMAScript 7功能（由于Babel）。 第一步显然是达到ECMAScript 6级别。我学习了许多异步模式，promise（确实很有希望），生成器（不确定为什么使用*符号）等。其中，promise非常适合我的目的。我已经在我的应用程序中使用它们很多次了。 这是我如何实现基本诺言的示例/伪代码- var myPromise = new Promise( function (resolve,reject) { var x = MyDataStore(myObj); resolve(x); }); myPromise.then( function (x) { init(x); }); 随着时间的流逝，我遇到了ECMAScript 7功能，其中之一是ASYNC和AWAIT关键字/功能。这些结合在一起创造了很大的奇迹。我已经开始用代替我的一些诺言async & await。它们似乎为编程风格增加了巨大的价值。 同样，这是我的async，await函数的伪代码，如下所示： async function myAsyncFunction (myObj) { var x = new MyDataStore(myObj); return await x.init(); } var returnVal = await myAsyncFunction(obj); …

95 javascript  asynchronous  reactjs  async-await  promise 

我想从React元素的实例中调用React组件公开的方法。 例如，在此jsfiddle中。我想alertMessage从HelloElement参考中调用该方法。 有没有一种方法可以实现而无需编写其他包装程序？ 编辑（从JSFiddle复制的代码） <div id="container"></div> <button onclick="onButtonClick()">Click me!</button> var onButtonClick = function () { //call alertMessage method from the reference of a React Element! Something like HelloElement.alertMessage() console.log("clicked!"); } var Hello = React.createClass({displayName: 'Hello', alertMessage: function() { alert(this.props.name); }, render: function() { return React.createElement("div", null, "Hello ", this.props.name); } …

95 reactjs 

我正在尝试使用react创建一个简单的表单，但是要使数据正确绑定到表单的defaultValue面临困难。 我正在寻找的行为是这样的： 当我打开页面时，“文本”输入字段应使用数据库中AwayMessage的文本填写。那就是“样本文本” 理想情况下，如果数据库中的AwayMessage没有文本，则我想在“文本”输入字段中有一个占位符。 但是，现在，我发现每次刷新页面时，“文本”输入字段均为空白。（尽管我在输入中键入的内容可以正确保存并持久保存。）我认为这是因为当AwayMessage为空对象时，输入文本字段的html会加载，而在awayMessage加载时不会刷新。另外，我无法为该字段指定默认值。 为了清楚起见，我删除了一些代码（即onToggleChange） window.Pages ||= {} Pages.AwayMessages = React.createClass getInitialState: -> App.API.fetchAwayMessage (data) => @setState awayMessage:data.away_message {awayMessage: {}} onTextChange: (event) -> console.log "VALUE", event.target.value onSubmit: (e) -> window.a = @ e.preventDefault() awayMessage = {} awayMessage["master_toggle"]=@refs["master_toggle"].getDOMNode().checked console.log "value of text", @refs["text"].getDOMNode().value awayMessage["text"]=@refs["text"].getDOMNode().value @awayMessage(awayMessage) awayMessage: (awayMessage)-> console.log "I'm saving", …

94 javascript  forms  reactjs  coffeescript  2-way-object-databinding