小编Dom*_*fin的帖子

所以我想将道具传递给Vue组件,但我希望这些道具将来会从该组件内部改变,例如当我使用AJAX从内部更新该Vue组件时.所以它们只用于组件的初始化.

我的cars-listVue组件元素,我将具有初始属性的props传递给single-car:

// cars-list.vue

<script>
    export default {
        data: function() {
            return {
                cars: [
                    {
                        color: 'red',
                        maxSpeed: 200,
                    },
                    {
                        color: 'blue',
                        maxSpeed: 195,
                    },
                ]
            }
        },
    }
</script>

<template>
    <div>
        <template v-for="car in cars">
            <single-car :initial-properties="car"></single-car>
        </template>
    </div>
</template>

我现在这样做的方式是在我的single-car组件里面我分配 this.initialProperties给我this.data.properties的created()初始化钩子.它起作用并且具有反应性.

// single-car.vue

<script>
    export default {
        data: function() {
            return {
                properties: {},
            }
        },
        created: function(){
            this.data.properties = this.initialProperties;
        },
    }
</script>

<template> …

例如: $(".element").fadeOut().delay(500).fadeIn();

为什么我可以在单个jQuery对象上运行多个函数？何时可以使用此功能？有关于此的任何教程/文档吗？

从Redux切换到MobX for React后,我开始非常喜欢MobX.这太棒了.

如果在渲染中未使用提供的商店observable,则MobX具有某种行为,它不会更新组件.我认为通常这是一个非常好的行为,只有在实际发生了变化时才会使组件呈现.

但是......我确实遇到过几种我不想要或者需要在渲染方法中使用MobX observable的情况,在这种情况下我this.props.store的MobX存储不会更新.

在这种情况下,作为一种解决方法,我只是在render方法中引用observable,但我认为这不是一个非常干净的方法,我想知道是否有更简洁的方法来做到这一点？

这个组件代码应该更多地解释我正在询问的内容.它是一个基于我在商店中拥有的MobX observable来改变体溢出样式的组件.

/*------------------------------------*\
  Imports
\*------------------------------------*/
import React from 'react';
import connectStore from 'script/connect-store';
import addClass from 'dom-helpers/class/addClass';
import removeClass from 'dom-helpers/class/removeClass';


/*------------------------------------*\
  Component
\*------------------------------------*/
class Component extends React.Component {

  constructor(props) {
    super(props);
    this.constructor.displayName = 'BodyClassSync';
  }

  componentDidMount() {
    this.checkAndUpdateMuiClass();
  }

  componentDidUpdate() {
    this.checkAndUpdateMuiClass();
  }

  checkAndUpdateMuiClass() {

    // This place is the only place I need latest MobX store... 
    if (this.props.store.muiOverlay) {
      addClass(window.document.body, 'mod-mui-overlay');
    }

    else {
      removeClass(window.document.body, 'mod-mui-overlay');
    }

  }


  render() …

我试图在本机 HTML5 拖放 API 中使用画布作为我的拖动图像。

问题是它适用于 Firefox，但不适用于 Chrome (58)，我无法确定问题所在。

代码：https : //jsfiddle.net/196urLwd/5/

<div id="thing" draggable="true">DRAG ME</div>

function onDragStart(event){

    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');

    canvas.width = 100;
    canvas.height = 20;

    context.fillStyle = '#333333';
    context.fillRect(0, 0, canvas.width, canvas.height);

    context.fillStyle = '#999999';
    context.font = 'bold 13px Arial';
    context.fillText('DRAGGING...', 5, 15);

    event.dataTransfer.setData('text', 'lorem ipsum');
    event.dataTransfer.effectAllowed = 'copy';    
    event.dataTransfer.setDragImage(canvas, -15, 9);

};

var theThing = document.getElementById('thing');
theThing.addEventListener('dragstart', onDragStart, false);

我究竟做错了什么？

反应文档说Never mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable...但是当我根本不使用setState()时这是一个非问题.

我能想到的唯一缺点是:

• 无法使用shouldComponentUpdate/ componentWillUpdate/ componentDidUpdate比较新旧状态.

• 对于其他人来说,可能会使维护更加困难.因为它不是做事的标准方式.

但是没有使用setState()和直接改变状态还有其他缺点吗？

编辑:我删除了我的理由为什么我被这个想法所吸引.我知道这是一种反模式,我知道这可能不是最好的方式.但这个问题都是关于"为什么"的问题.

EDIT2:这里的关键词other也在... are there any other disadvantages ...