Questions tagged «reactjs»

许多模板语言都有“ slots”或“ yield”语句，它们允许进行某种形式的控制反转，以将一个模板包装在另一个模板中。 Angular具有“ transclude”选项。 Rails有收益声明。如果React.js拥有yield语句，它将看起来像这样： var Wrapper = React.createClass({ render: function() { return ( <div className="wrapper"> before <yield/> after </div> ); } }); var Main = React.createClass({ render: function() { return ( <Wrapper><h1>content</h1></Wrapper> ); } }); 所需的输出： <div class="wrapper"> before <h1>content</h1> after </div> React，React.js没有<yield/>。如何定义包装器组件以实现相同的输出？

187 javascript  template-engine  composition  reactjs  transclusion 

假设我有一个React类P，它渲染了两个子类C1和C2。 C1包含一个输入字段。我将此输入字段称为Foo。 我的目标是让C2对Foo的变化做出反应。 我已经提出了两种解决方案，但是它们都不对。 第一个解决方案： 为P分配一个状态，state.input。 onChange在P中创建一个函数，该函数接受一个事件并设置state.input。 onChange将其作为传递给C1 props，然后让C1绑定this.props.onChange到onChangeFoo。 这可行。每当Foo的值更改时，它都会触发setStateP中的a，因此P会将输入传递给C2。 但是由于相同的原因，感觉不太正确：我正在从子元素中设置父元素的状态。这似乎背叛了React的设计原理：单向数据流。 这是我应该怎么做，还是有一个更自然的React解决方案？ 第二种解决方案： 只需将Foo放在P中即可。 但这是我在构建应用程序时应遵循的设计原则—将所有表单元素都放在render最高级别的类中？ 就像在我的示例中一样，如果我渲染了很大的C1，我真的不想将整个renderC1render仅仅因为C1具有表单元素 P中。 我该怎么办？

186 reactjs 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引文回答。 2年前关闭。 改善这个问题 React 16.3.0已发布，并且Context API不再是实验功能。Dan Abramov（Redux的创建者）在这里对此发表了很好的评论，但是Context仍然是实验性功能已经有两年了。 我的问题是，根据您的看法/经验，我何时应该在React Redux上使用React Context，反之亦然？

186 javascript  reactjs  redux  react-redux  react-context 

我在使用React表单和正确管理状态时遇到麻烦。我有一个形式为模式的时间输入字段。初始值在中设置为状态变量getInitialState，并从父组件传递。这本身工作正常。 当我想通过父组件更新默认的start_time值时，就会出现问题。更新本身通过发生在父组件中setState start_time: new_time。但是在我的表单中，默认的start_time值从不更改，因为它仅在中定义一次getInitialState。 我尝试过通过componentWillUpdate强制进行状态更改setState start_time: next_props.start_time，该更改确实有效，但给了我Uncaught RangeError: Maximum call stack size exceeded错误。 所以我的问题是，在这种情况下更新状态的正确方法是什么？我是否以某种方式在考虑这个错误？ 当前代码： @ModalBody = React.createClass getInitialState: -> start_time: @props.start_time.format("HH:mm") #works but takes long and causes: #"Uncaught RangeError: Maximum call stack size exceeded" componentWillUpdate: (next_props, next_state) -> @setState(start_time: next_props.start_time.format("HH:mm")) fieldChanged: (fieldName, event) -> stateUpdate = {} stateUpdate[fieldName] = …

184 reactjs 

为什么我不能从ReactJS的“外部”访问组件方法？为什么不可能，有什么办法解决呢？ 考虑一下代码： var Parent = React.createClass({ render: function() { var child = <Child />; return ( <div> {child.someMethod()} // expect "bar", got a "not a function" error. </div> ); } }); var Child = React.createClass({ render: function() { return ( <div> foo </div> ); }, someMethod: function() { return 'bar'; …

182 javascript  reactjs  dom 

我通过使用访存来调用Web服务，但是我可以在axios的帮助下进行相同的操作。所以现在我很困惑。我应该选择axios还是fetch？

182 ajax  reactjs  xmlhttprequest  es6-promise  es6-modules 

我是将ES6类与React结合使用的新手，以前我一直将我的方法绑定到当前对象（如第一个示例所示），但是ES6是否允许我使用箭头将类函数永久绑定到类实例？（在作为回调函数传递时很有用。）当我尝试使用CoffeeScript尝试使用它们时，会出现错误： class SomeClass extends React.Component { // Instead of this constructor(){ this.handleInputChange = this.handleInputChange.bind(this) } // Can I somehow do this? Am i just getting the syntax wrong? handleInputChange (val) => { console.log('selectionMade: ', val); } 这样，如果我要传递SomeClass.handleInputChange给，setTimeout它将被限制为类实例，而不是window对象。

181 javascript  reactjs  ecmascript-6  babeljs  ecmascript-next 

我有一个聊天小部件，每次向上滚动时，它都会拉出一系列消息。我现在面临的问题是加载消息时滑块固定在顶部。我希望它专注于上一个数组中的最后一个索引元素。我发现可以通过传递索引来创建动态引用，但是我还需要知道使用哪种滚动功能来实现这一点 handleScrollToElement(event) { const tesNode = ReactDOM.findDOMNode(this.refs.test) if (some_logic){ //scroll to testNode } } render() { return ( <div> <div ref="test"></div> </div>) }

181 javascript  reactjs  ecmascript-6 

我是整个nodejs / reactjs领域的新手，如果我的问题听起来很傻，我深表歉意。所以我在玩reactabular.js。 每当我执行此操作时，npm start它就会一直运行localhost:8080。 我如何更改它0.0.0.0:8080以使其可以公开访问？我一直在尝试阅读上述回购中的源代码，但未能找到执行此设置的文件。 另外，要补充一点- 80如果可能的话，如何使它在端口上运行？

180 node.js  reactjs  npm  webpack  webpack-dev-server 

我想显示title在<AppBar />以某种方式从目前的路线通过。 在React Router v4中，如何将<AppBar />当前路由传递到titleprop中？ <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> 有没有办法通过从自定义自定义标题prop上<Route />？

180 reactjs  react-router  react-router-v4 

我非常喜欢React中的内联CSS模式，并决定使用它。 但是，您不能使用:hover和类似的选择器。那么，在使用内联CSS样式时实现悬停时高亮显示的最佳方法是什么？ #reactjs的一个建议是拥有一个Clickable组件并像这样使用它： <Clickable> <Link /> </Clickable> 该Clickable有一个hovered状态，并将其作为道具的链接。但是，Clickable（我的方式来实现它）包裹Link的div，以便它可以设置onMouseEnter并onMouseLeave给它。不过，这会使事情有些复杂（例如，span包裹在div行为上与有所不同span）。 有没有更简单的方法？

177 reactjs 

我正在使用create-react-app，但不想使用eject。 目前尚不清楚应该通过@ font-face导入并本地加载的字体在哪里。 即我正在加载 @font-face { font-family: 'Myriad Pro Regular'; font-style: normal; font-weight: normal; src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff'); } 有什么建议？ -编辑 包括丹在回答中提到的要点 ➜ Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts total 1168 -rwxr-xr-x@ 1 maximveksler staff 62676 Mar 17 2014 MYRIADPRO-BOLD.woff -rwxr-xr-x@ 1 maximveksler staff 61500 Mar 17 2014 …

177 css  reactjs  fonts  webpack  create-react-app 

我正在使用Cloud9.io ubuntu VM Online IDE作为环境，并且通过对该错误进行故障诊断而减少了使用Webpack开发服务器运行应用程序的速度。 我用以下命令启动它： webpack-dev-server -d --watch --history-api-fallback --host $IP --port $PORT $ IP是具有主机地址的变量，$ PORT具有端口号。 我被指示在Cloud 9中部署应用程序时使用这些var，因为它们具有默认的IP和PORT信息。 服务器启动并编译代码，没问题，虽然它没有显示索引文件。只有空白屏幕，“无效的主机头”为文本。 这是请求： GET / HTTP/1.1 Host: store-client-nestroia1.c9users.io Connection: keep-alive Pragma: no-cache Cache-Control: no-cache Upgrade-Insecure-Requests: 1 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 DNT: …

176 reactjs  webpack-dev-server  cloud9-ide  cloud9 

我来自一个有角的世界，在那里我可以将逻辑提取到服务/工厂，并在控制器中使用它们。 我试图了解如何在React应用程序中实现相同的目标。 假设我有一个可以验证用户密码输入（强度）的组件。它的逻辑非常复杂，因此我不想将其编写在自己的组件中。 我应该在哪里写这个逻辑？在商店中，如果我使用助焊剂？还是有更好的选择？

176 reactjs  reactjs-flux 

我试图在ReactJS中切换组件的状态，但出现错误： 超过最大更新深度。当组件重复调用componentWillUpdate或componentDidUpdate内部的setState时，可能会发生这种情况。React限制了嵌套更新的数量，以防止无限循环。 我在代码中看不到无限循环，有人可以帮忙吗？ ReactJS组件代码： import React, { Component } from 'react'; import styled from 'styled-components'; class Item extends React.Component { constructor(props) { super(props); this.toggle= this.toggle.bind(this); this.state = { details: false } } toggle(){ const currentState = this.state.details; this.setState({ details: !currentState }); } render() { return ( <tr className="Item"> <td>{this.props.config.server}</td> <td>{this.props.config.verbose}</td> …

176 javascript  reactjs  react-native