Tag: reactjs

使用Rails 4.2配置react-bootstrap: 我想将React-bootstrap与我当前的Rails项目集成。我是ReactJS的新手，所以我认为使用react-bootstrap lib会让事情变得更容易。但是，我发现配置非常困难。假设有一个gem，但是一旦遵循README上的说明，它就会抛出“Permission denied”错误。我尝试从react-bootstrap网站剪切，它没有react-bootstrap语法。但是，我尝试使用Bower，npm，rails-assets gem等的所有解决方案都不会使react-bootstrap语法呈现。这是我的Button.js.jsx文件，它不会呈现给我的主页： var button = ReactBootstrap.Button({ bsStyle: “success”, bsSize: “large”, children: “Register” }); React.render(button, document.getElementById(“content”)); 非常欢迎提示和建议！

未捕获的ReferenceError：require未定义反应轨道: 我刚刚解决了两个这样的错误。 Uncaught ReferenceError: $ is not defined Uncaught ReferenceError: React is not defined 现在我明白了。我只是不断收到这些错误。我只是尝试第一次实现对rails的反应，我试图通过一个html div类从一个反应组件说一个简单的“Hello React”。我无法做到。的application.js //= require rails-ujs //= require_tree . //= require jquery //= require jquery_ujs //= require react index.html.erb main.jsx import React from ‘react’; import ReactDOM from ‘react-dom’; let documentReady = () => { React.render( Hello React, document.getElementById(‘react’) […]

Browserify Rails错误 – ParseError：’import’和’export’可能只出现’sourceType：module’: 最近我想在我的rails应用程序中集成NPM包。我遇到这个问题：如果有人和我一样有问题，我会在这个论坛中搜索。是的，我在这里看到了类似的问题，但他们有不同的错误。以下是我在我的application.js中的内容： //= require jquery //= require jquery_ujs //= require turbolinks //= require react //= require react_ujs //= require components //= require react-select //= require react-dom //= require classnames //= require_tree . $(function(){ $(document).foundation(); }); 这是我尝试导入包的地方 var React = require(‘react’); var ReactDOM = require(‘react-dom’); var FileBase64 = require(‘react-file-base64’); var MembersNew = React.createClass( […]

React-Rails – 入门问题: 我正在试图弄清楚如何在我的Rails 5 gem中使用react-rails。目前，我正在尝试按照本文中的教程进行操作。 https://medium.com/technically-speaking/isomorphic-reactjs-app-with-ruby-on-rails-part-1-server-side-rendering-8438bbb1ea1c#.iwd44r60v 我目前无法获取要呈现的页面。我使用app_roles而不是post，但除此之外我还按照教程中显示的步骤操作。我的app / assets / javascripts / components文件夹中有两个文件。 app_role.js.jsx有： var AppRole = React.createClass({ render: function() { return ( ); } }); var AppRoleHeader = React.createClass({ render: function() { return ( {this.props.app_role.title} By {this.props.app_role.title} – {this.props.app_role.created_at} ); } }); var AppRoleContent = React.createClass({ render: function() { return ( {this.props.app_role.display_name} ); […]

Rails 5 – 如何以实时方式发送通知？: 在rails 5中，我试图以实时方式发送通知。我已经提到了http://jameshuynh.com/rails/react%20js/chat/2017/07/30/build-chat-using-react-js-and-rails-action-cable/ 但我已经有一些方法也会这样做。根据此方法，通知应基于user_id动态发送。甚至频道取决于user_id。在react，header.jsx文件中， import ActionCable from ‘actioncable’; export default class Header extends React.Component { cable = ActionCable.createConsumer(‘ws://localhost:3000/cable’); componentDidMount() { HttpService.get(‘/api/v1/notifications’, this.getNotificationsSuccess); let that = this; this.cable.subscriptions.create(“NotificationsChannel”, { user_id: this.state.currentUser.id, connected: function () { // Timeout here is needed to make sure Subscription // is setup properly, before we do any actions. […]

Webpacker：如果没有./bin/webpack-dev-server，则无法使用public / assets / packs资产: 我正在使用Rails + Webpacker（用于React npm包）。当我尝试使用任何资产时，会发生错误：安全警告：另一个站点上的嵌入式标记请求受保护的JavaScript 这就是为什么它不加载我的webpacker编译的资源javascript。它只有在我运行./bin/webpack-dev-server 如何在没有./bin/webpack-dev-server情况下加载我的资产。

使用Rails反应JS – 使用URL访问JSON数据: 我正在学习如何在我的Rails应用程序中使用React JS。免责声明：这是我第一次搞乱JS！我跟随Michael Chan在Rails Conf的演讲。一切都运行得很漂亮，直到我点击CommentsContainer部分，在那里他从Rails路线获取评论数据。我试图做同样的事情，除了在一个简单的歌曲控制器（用脚手架生成，名称和艺术家作为属性）。我陷入了他用路径获取此数据的部分，当我尝试运行代码时，我最终得到了一个500错误页面。我不知道如何调试我的React代码，因为浏览器控制台只显示500错误。这是我的看法，这是我的React代码， var SongsContainer = React.createClass({ componentWillMount(){ this.fetchSongs(); setInterval(this.fetchSongs, 1000); }, fetchSongs() { $.getJSON( this.props.songsPath, (data) => this.setState({songs: data}); ); }, getInitialState() { return { songs: [] }; }, render() { return ; } }); 任何帮助将不胜感激！我只是看着这500页不知道该怎么做。编辑：添加服务器日志 Started GET “/” for ::1 at 2015-08-11 […]

从另一个文件连接reactjs组件: 我从Rails和React开发测试项目。我有反应的根组件： # chat_app.js.jsx.coffee ###* @jsx React.DOM ### @ChatApp = React.createClass displayName: ‘chatApp’ render: -> return ( ` React Chat App Example ` ) React.renderComponent( window.ChatApp(null), document.getElementById(‘chatApp’) ) 我有另一个组成部分： # message_list.js.jsx.coffee ###* @jsx React.DOM ### @MessageList = React.createClass displayName: ‘messageList’ render: -> return ( ` qwe ` ) 但在浏览器中我有：Uncaught ReferenceError：未定义MessageList 如何将MessageList连接到ChatApp？

在“索引”页面上，编辑1行时，所有行都将重新呈现（非常缓慢）。在Ruby on Rails上使用Reactjs: 使用： – ruby“2.3.1”gem“rails”，“5.0.0.1”gem“react_on_rails”，“〜> 6.3.2” 这是我的问题：问题单击复选框会将联系人添加到$$selectedContacts ，但随后每个联系人都会重新呈现，这非常慢！[联系人索引] 这是用户页面的图片:(一个简单的索引页面） http://take.ms/e7gXG 问题如何在Contact.jsx正确使用shouldComponentUpdate ，以便联系行仅在更改后重新呈现？我应该在哪里使用容器？感觉在Contact.jsx使用connect可能不是最好的选择？任何其他建议这是一个关于要点的链接： https ： //gist.github.com/heyogrady/4ba880c7ecffe18fdb70ad2d56e034cc

CSRF InvalidAuthenticityToken带有rails并做出反应: 我无法让我的代码使用CSRF-Token。我有一个axiosconfig文件，我在其中设置axios并将其导出： import axios from ‘axios’ const csrfToken = document.querySelector(‘meta[name=”csrf-token”]’).getAttribute(‘content’) const instance = axios.create({ baseURL: ‘http://api.domain.tld/v1/’, headers: { ‘X-CSRF-Token’: csrfToken } }); export default instance 和我的反应组件我导入它： import axios from ‘../config/axios’ 以我的forms提交我解雇这个post： axios .post(‘/test’, { longUrl: this.state.testValue }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 我的头像这样： axios发布的请求是这样的：来自request-header和我脑袋的CSRF-Tokens是相同的但是我的rails-app响应错误422（Unprocessable Entity）和： ActionController::InvalidAuthenticityToken 是否有可能出现这种问题： // `xsrfCookieName` […]