Tag: reactjs

使用在React组件中转换DOM的JQuery插件？: 一些JQuery插件不只是添加行为到DOM节点，而是改变它们。例如， Bootstrap开关打开 <input type="checkbox" name="my-checkbox" checked> 变成类似的东西 <div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate"> <div class="bootstrap-switch-container"> <span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span> <label class="bootstrap-switch-label"> </label> <span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span> <input type="checkbox" name="download-version" checked="" data-size="large" data-on-text="3" data-off-text="2.0.1"> </div> </div> 同 $("[name='my-checkbox']").bootstrapSwitch(); 哪个不与React一起跳动： Uncaught Error: Invariant Violation: findComponentRoot(…, .0): Unable to find element. This probably means the DOM was unexpectedly mutated (eg, […]

如何停止/＃/浏览器与react-router？: 在使用react-router时，有什么办法可以防止/#/在浏览器地址栏中显示？这是与ReactJS。即点击链接转到一个新的路线显示localhost:3000/#/或localhost:3000/#/about 。取决于路线。

客户端路由（使用react-router）和服务器端路由: 我一直在想，我很困惑与客户端和服务器之间的路由。假设在将请求发送回Web浏览器之前，我使用ReactJS进行服务器端渲染，并使用react-router作为客户端路由在页面之间进行切换，而不用刷新SPA。想到的是：如何解释路线？例如，从主页（ /home ）请求到发布页面（ /posts ）路由在服务器端或客户端在哪里？它如何知道它是如何处理的？

TypeError：无法读取未定义的属性“setState”: 我试图在ajaxcallback从REST api接收数据后setState的组件。这里是我的组件构造函数的代码 constructor(props) { super(props); this.state = { posts: [] }; this.getPosts = this.getPosts.bind(this); } 然后我有一个componentDidMount方法，看起来像下面。 componentDidMount() { this.getPosts(); } 现在，这里是我正在做Ajax请求的getPosts函数。 getPosts = () => { $.ajax({ type: 'get', url: urlname, success: function(data) { this.setState( { posts: data } ) } }); } 我正在绑定设置状态，但我得到以下错误。 this.setState is not a function 不确定是什么原因造成的。如果有人指向正确的方向，这将是非常有帮助的。提前致谢。

将自定义道具传递给react-router v4中的路由器组件: 我正在使用React Router来创build一个多页面的应用程序。我的主要组件是<App/> ，它呈现所有的路由到子组件。我试图通过道路传递道具，根据我做的一些研究，子元素最常用的方法是通过它inheritance的this.props.route对象传递下去。但是，这个对象对我来说是不确定的。在我的render()函数在子组件中，我console.log(this.props)并返回一个对象，看起来像这样 {match: Object, location: Object, history: Object, staticContext: undefined} 看起来不像我期望的道具。这是我的代码详细。父组件（我试图在我所有的子组件中将“hi”这个词作为一个叫做“test”的道具）： import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom'; import Link from 'react-router'; import React from 'react'; import Home from './Home.jsx'; import Nav from './Nav.jsx'; import Progress from './Progress.jsx'; import Test from './Test.jsx'; export […]

为什么我不能更新react.js中的道具？: 为什么我们有state和props ？为什么我们不只有一个数据源？我想更新一个组件的props ，并重新渲染自己和所有的孩子。看起来很简单，但我不知道如何让组件更新自己或其父母的道具。感谢您的帮助。

React / JSXdynamic组件名称: 我想dynamic呈现组件的types。例如： var type = "Example"; var ComponentName = type + "Component"; return <ComponentName />; // Returns <examplecomponent /> instead of <ExampleComponent /> 我尝试了这里提出的解决schemeReact / JSXdynamic组件名称这在编译时给我一个错误（使用browserify for gulp）。它期望我使用数组语法的XML。我可以通过为每个组件创build一个方法来解决这个问题： newExampleComponent() { return <ExampleComponent />; } newComponent(type) { return this["new" + type + "Component"](); } 但是，这意味着我创build每个组件的新方法。这个问题必须有一个更优雅的解决scheme。我非常乐于提供build议。

this.setState没有像我期望的那样合并状态: 我有以下状态： this.setState({ selected: { id: 1, name: 'Foobar' } }); 然后我更新状态： this.setState({ selected: { name: 'Barfoo' }}); 由于setState是假设合并我期望它是： { selected: { id: 1, name: 'Barfoo' } }; 但相反，它吃的ID和国家是： { selected: { name: 'Barfoo' } }; 这是预期的行为和有什么解决scheme来更新只有一个嵌套状态对象的属性？

React在渲染之后着重于input: 组件渲染后，在特定文本字段上设置焦点的反应方式是什么？文档似乎build议使用参考，例如：在渲染函数的input字段中设置ref="nameInput" ，然后调用： this.refs.nameInput.getInputDOMNode().focus(); 但是我应该在哪里调用？我已经尝试了几个地方，但我不能得到它的工作。

React – 在AJAX之后添加组件来查看: 我一直在试图做一个AJAX调用，然后将其添加到我的视图后，已被检索。目前的代码没有真正发生。 const View = () => ( <div> <h1>Reports</h1> <statisticsPage /> </div> ); export default View; var statisticsPage = React.createClass({ getInitialState: function() { return {info: "loading … "}; }, componentDidMount: function() { this.requestStatistics(1); }, render: function() { return ( <div>info: {this.state.info}</div> ); }, requestStatistics:function(){ axios.get('api/2/statistics') .then(res => { values = res['data'] this.setState({info:1}) console.log('works!!') }); […]