小编Ser*_*koy的帖子

我不喜欢使用,Object.entries(object).map((key, i)因为我发现这是ECMAScript 7的实验技术,我觉得生产中可能出现问题.有没有本机JavaScript替代品？

我对名称,价格,描述的值没有任何问题,因为我确切知道应该在哪里呈现它们,我可以使用Populate.key访问它们,但是对于特性,我需要识别对象并呈现键和值.

我尝试使用Object.keys(priceChars).map(function(key, i)但不明白如何将键与值分开.就像,它呈现"性能500",但我需要性能词在图标类中,500是要显示的实际值.

我的JSON结构

const Populate = {
  'name': "Product",
  'price': "1000",
  'description': "Product description",
  'characteristics': {
    'performance': '500',
    'pressure': '180',
    'engine': '4',
    'size': '860*730*1300',
    'weight': '420'
  }
}

和组件

class PriceBlock extends Component {
  render() {
    const {priceName, priceDesc, priceVal, priceChars} = this.props;
    const characteristics = Object.entries(priceChars).map((key, i) => {
      return (
        <div className="price__icon-row" key={i}>
          <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span>
        </div>
      );
    });
    return (
      <div className="col-5 price__block">
        <div className="price__name">{priceName}</div>
        <div …

在我目前的React + React-router设置中,我的组件导入了一些jQuery的东西(owl.carousel和magnific popup)

我想保持代码干净,因此外部功能存储在单独的文件中.以下代码仅在页面加载了直接URL时才起作用,并且在导航回转发应用程序时不起作用.所以内部的一切都$(document).ready只能通过直接链接触发.

import '../jQuery/carousel.js';

$(document).ready(function(){
    $('.owl-carousel').owlCarousel({
    });

    $('.popup-gallery').magnificPopup({
    });
});

我该如何处理这个问题？我尝试使用componentWillMount并使用一些自定义函数包装.ready(),但我无法访问updateJs()导入的文件

class MyComponent extends Component {
  componentWillMount() {
    updateJs();
  }
}

我按照本指南使用Websockets创建聊天功能. https://www.sitepoint.com/rails-and-actioncable-adding-advanced-features/

env['warden'].user即使我用标准的Devise表单登录到应用程序时,我仍然遇到了一个无法重新调整的问题.

如果我使用另一种方法(现在已经注释) - 它会返回错误的用户

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
      logger.add_tags 'ActionCable', current_user.email
    end

    protected

    def find_verified_user # this checks whether a user is authenticated with devise
      verified_user = env['warden'].user

      if verified_user
        verified_user
      else
        reject_unauthorized_connection
      end
    end

    # def find_verified_user
    #     user_id = request.headers['HTTP_AUTHORIZATION']
    #     if verified_user = User.find_by(user_id)
    #        verified_user
    #     else
    #        reject_unauthorized_connection
    #     end
    # end

  end
end

日志说

Started GET "/cable/" [WebSocket] for 127.0.0.1 at 2017-04-06 …

无法弄清楚过渡为何不起作用

因此，其想法是，带有一些文本的块应该在：hover上可见。它可以作为非悬停状态的参考（隐藏文本为rgba）

我尝试了所有和显示属性。我也尝试将过渡添加到所有元素，例如h3和p。

请访问 https://jsfiddle.net/dyrc522f/

<div class="photo photo2">Some title
                <div class="photobl photobl2">
                    <h3>Some title</h3>
                    <p>text</p>
                </div> 
            </div>

的CSS

.photo{
    width: 244px;
    height: 219px;
    float: left;
    color: #fff;
    position: relative;
    font-size: 23px;
    font-weight: 700;
    text-align: center;
    padding-top: 180px;
    -webkit-transition:all .4s ease;
    -moz-transition:all .4s ease;
    -ms-transition:all .4s ease;
    transition: all .4s ease;

  background-color: tomato;/**/
    }
.photo:hover{
    color: rgba(0, 0, 0, 0);
}
.photo:hover .photobl{
    display: block;
}
.photobl{
    display: none;
    width: 244px;
    height: 399px;
    position: absolute;
    background: rgba(0, 0, 0, 0.5) url('../images/logomin.png') …

在我的Rails应用程序上开发数据库架构时,我犯了一个战略错误

现在我必须使用价格功能实现排序

MyModel.order('price DESC')

price是数据库中的字符串类型,例如,导致50大于2000

有没有办法在.order()不改变数据库结构的情况下实现这些？

编辑:

我切换到价格列的正确类型(整数).我花了一个小时才进行重构.

我正在使用create-react-app工具来构建我的第一个反应应用程序，react-routes现在我想使用服务器端渲染来避免一次加载所有页面。

我遵循指南并安装了express.js，使用.js文件分隔了客户端和服务器端，并使用

NODE_ENV=production babel-node --presets 'react,es2015' src/server.js

但是当应用程序尝试编译sass @import语句时出现错误。我认为我必须首先提供资产，但是我不知道如何在server.js逻辑中插入webpack函数

create-react-app还具有npm run build用于生产构建以及创建js和css文件的命令，因此也许有一些方法可以在编译server.js时跳过资产部分？

Server.js文件内容

import path from 'path';
import { Server } from 'http';
import Express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { match, RouterContext } from 'react-router';
import routes from './routes';
import NoMatch from './pages/NoMatch';

// initialize the server and configure support for ejs templates
const app = new Express();
const server = new Server(app);
app.set('view …

我正在使用最新create-react-app配置并在不同路由之间切换时遇到问题。

所有 mySVG都包含在精灵文件中。从逻辑上讲，sprite.svg文件应该在第一页加载时缓存。

但相反，每次更改路线（有react-router4 个）都会加载此文件，这会导致闪烁。内容立即更改，但图像加载延迟 1 秒。png包含通过importin相同jsx。

从我在控制台中看不到的内容来看，相同的文件一遍又一遍地下载。

http://cabin.surge.sh/ 上的现场演示（即尝试在标题部分的定价/关于页面之间进行更改）

更新：

我包含 SVG 图像的方式 - 是愚蠢的组件 <SvgIcon name="checkmark" />

import React, { Component } from 'react';
import sprite from '../images/sprite.svg';

export default class SvgIcon extends Component {
  render(){
    const { name } = this.props;
    return(
      <svg className={"ico ico-" + name}>
        <use xlinkHref={sprite + "#ico-" + name}></use>
      </svg>
    )
  }
}

PNG 图像

<img src={require(`../images/${authorImage}.png`)} srcSet={require(`../images/${authorImage}@2x.png`) …

我有一个滑块,其中包括按绝对值定位的导航点.我想知道如何通过X轴将这些点居中.

当它设置正确时我很好:10%; 在桌面布局.但是当%的值时,移动设备会出现美学问题,因为宽度较小,它在中心看起来从未正确.

我搜索了很多,最流行的解决方案是

left: 50%;
right: 50% transform: translateX(50%);

但它仍然像左边一样工作..请看下面的jsfiddle代码,我需要第二个和第三个白点之间的空间被白色垂直线切割.

https://jsfiddle.net/dpmango/vk9oc6gt/2/

感谢您提前帮助!

我刚开始学习Rails并尝试制作我的第一个应用程序.只是想知道是否可以使用这样的结构

      <%= form_tag create_message_path, :method => :post do %>
          <%= text_area_tag "message", nil %>
          <%= hidden_field_tag "receiver", @order.printer.user.id %>
          <%= hidden_field_tag "order_id", @order.id %>
          <%= submit_tag "Submit" %>
      <% end %>

而基本的强大的障碍.

class MessagesController < ApplicationController
  before_action :correct_user, only: [:update, :destroy]

  def create
    if current_user
      @message = current_user.messages.build(message_params)

      if @message.save
        flash[:success] = "????????? ???????"
        redirect_to :back
      else
        redirect_to :back
      end
    else
      redirect_to login_path
    end
  end


  private
    def message_params
      params.permit(:message, :read, :receiver, :user_id, :printer_id, :order_id )
    end
    def correct_user
      @message = …

在React应用程序中处理onChange以获取简单的联系表单时,如何与DRY编码保持一致？

我想传递一个应该更新的状态的参数

例如,简单地有4个输入[名称,电话,电子邮件,文本]需要4个不同的事件处理程序来更新组件的不同状态,这不是很好.

  constructor(props) {
    super(props);
    this.state = {
      type: '',
      message: '',
      name: '',
      email: '',
      phone: '',
      content: ''
    };
  }
  handleChange(e, state) {
    this.setState({state: e.target.value});
    alert(state + " with val " + e.target.value)
  }

这不起作用并抛出一个无法读取未定义错误的属性"值"

<input value={this.state.name} onChange={this.handleChange(name).bind(this)} id="firstName" name="firstName" autocomplete="off" type="text" required />