小编Try*_*ace的帖子

我正在尝试使用卸载React.js节点 this._rootNodeID

 handleClick: function() {

        React.unmountComponentAtNode(this._rootNodeID)

 }

Run Code Online (Sandbox Code Playgroud)

但它回来了false.

在handleClick当我点击一个元素上,而应卸载根节点被激发.这里有文档unmountComponentAtNode

我也试过这个:

React.unmountComponentAtNode($( '*[数据reactid = " '+ this._rootNodeID +"']')[0])

该选择器可以使用jQuery.hide(),但不能卸载它,而文档声明它应该是一个DOMElement,就像你将要使用的那样React.renderComponent

经过几次测试后发现它适用于某些元素/选择器.

它以某种方式适用于选择器:document.getElementById('maindiv'),其中maindiv是一个不是用React.js生成的元素,而只是简单的html.然后它返回true.

但是一旦我尝试选择使用React.js生成的不同ElementById,它就会返回false.它document.body也不适用,但如果我控制它们,它们基本上都返回相同的东西.log(getElementsByClassName('bla')[0]也不起作用)

应该有一种简单的方法来选择节点this,而不必诉诸jQuery或其他选择器,我知道它在某处...

我正在尝试遍历列表/数组/对象的东西:(我使用coffeescript来保持清楚,这里是完整JS的jsfiddle.但它只是一个forEach)

pages = for page, each of @props.ids
    $('#start').append("<div id='"+page+"' ></div>")
    React.renderComponent page(title: each.title, text: each.text), $("#"+page)[0]

并附加每个,而不是替换,只留下列表中的最后一项.

其中#start元素是起始容器,我想用多个元素填充它,但我需要给每个自己的容器,否则它们将全部覆盖彼此,默认的reactjs行为.

我想知道是否有办法告诉反应追加而不是替换div.

如果可能的话,我想避免使用jquery,并且完全做出反应.

我虽然给出了React.renderComponent page初始列表,然后在先前调用的模板中迭代,但是,然后我面临一个不同的问题,我必须有return一个reactjs元素对象,由整个列表组成,我真的不喜欢.

我需要初始调用来创建单独的,独立的反应模板,在列表中追加其他,最好没有任何额外的容器,或者使用jquery.

所以我想创建这个JSON对象:

{
   "id":"3",
   "created":"0000-00-00",
   "parentIDs":null,
   "childIDs":"",
   "uid":"movies",
   "title":"Movies",
   "related":"movies",
   "pos":"",
   "css":"{ "background-image":"-webkit-linear-gradient(bottom, rgb(46,44,46) 49%, rgb(18,17,18) 75%)" }"
}

来自字符串:

value = ""id":"3","created":"0000-00-00","parentIDs":null,"childIDs":"","uid":"imdb","title":"Imdb","related":"movies","pos":"""

这个字符串来自一个数据库,所以我无法真正改变格式,但它应该像这样正确.

(这个字符串来自一个类似的字符串数组,我迭代它们,不知何故丢失它们周围的{}

我尝试删除外部引号value.substr(1, value.length - 2);.然后转换它.toJSON();但它只添加了许多我不需要的额外斜杠.

我只需要添加{}它,然后javascript会将其视为JSON对象.

有没有这样做的简写方法？或者是否有一个小型库可以巧妙地将我凌乱的字符串转换为JSON对象？

[update]

我试过了:eval('{' + value + '}');但我进入Uncaught SyntaxError: Unexpected token :了Chrome.

我试过JSON.parse但得到:TypeError: JSON.parse is not a function在Chrome和Firefox中,它必须是字符串的格式.我开始怀疑"css"条目,虽然它开始抱怨第一个"id"条目,它期待一个函数而不是JSON？

(我减少了原始JSON,但忘记了最重要的"css")

[UPDATE2]

好吧,所以我改变了css数据'而不是",现在它实际上会解析,但现在我的脚本坏了,因为我期待从db中获取原始CSS,任何方式将结果更改'css':'blabla'为:"css":"blabla"？

所以来自：

export interface Category{
  val: string;
  icon: string
}
const categoryArray: Category[] = [
  {
    val: 'business',
    icon: 'store'
  },
  {
    val: 'media',
    icon: 'video'
  },
  {
    val: 'people',
    icon: 'account'
  },

  ... 

我想像这样找回 Union 类型：

'business' | 'media' | 'people' ... 

我不知道有什么样的语法或帮助程序，也许根本没有。我意识到这种方式可能是倒退的，也许应该使用枚举，但在此之前，我想知道这是可能的。

我想做的一些虚构的例子，但我希望解决方案更加复杂

type Cats = keysof[] categoryArray 'val'  
type Cats = valuesof categoryArray 'val'

以下内容很接近，但返回string：

export type CatsValType = typeof categories[number]['val']

或以下；我需要字符串文字而不是类型

type ValueOf<T> = T[keyof T];
type KeyTypes = ValueOf<typeof categories[number]> // Returns: `string`

还有类似的问题，例如： …

有一个输入字段，例如：

<input type="text" />

会自动（在 Android 上）将Enter键盘上的选项更改为Next，并且它将跳转到下一个字段。

如何避免这种行为？

就我而言，我使用输入字段将标签添加到 (或Chips)，它在移动设备上可以正常工作，因为会触发适当的事件。

但是当Next按钮显示时，它似乎模拟按下tab键盘，即它进入下一个字段。我需要它来代替submit。

（也找不到此键盘显示行为的任何相关规格，它似乎是一个自由格式的 Android 特定的东西）

所以我有一个tab-component有3个项目:

React.DOM.ul( className: 'nav navbar-nav', 
    MenuItem( uid: 'home')
    MenuItem( uid: 'about')
    MenuItem( uid: 'contact)
)

而在.render中MenuItem:

React.DOM.li( id : @props.uid, className: @activeClass, onClick: @handleClick,
    React.DOM.a( href: "#"+@props.uid, @props.uid)
)

每次我点击一个项目,都会调用一个骨干路由器,然后调用tab-component它,然后调用一个page-component.

我仍然试图绕过一个基本上是单向数据流的事实.我已经习惯了直接操作DOM.

我想要做的是将.active类添加到单击的选项卡中,并确保将其从不活动的选项卡中删除.

我知道CSS技巧,您可以使用data-属性并将不同的样式应用于true或的属性false.

骨干路由器已经获得了变量uid并调用了正确的页面.我只是不确定如何最好地切换选项卡之间的类,因为只有一个可以同时处于活动状态.

现在我可以记录选择哪个选项卡,并切换它们等等.但是React.js已经具有这种记录保存功能.

在@handleClick你看,我甚至不希望使用的,因为路由器应该告诉tab-component这些人给的className: '.active',我想避免的jQuery,因为React.js并不需要直接的DOM操作.

我已经尝试了@state的一些东西,但我知道确实有一种非常优雅的方式来实现这个相当简单,我想我看过一些人的演示或视频.

我真的必须习惯并改变我的思维方式来思考React-ively.

只是寻找一种最佳实践方式,我可以用一种非常丑陋和笨重的方式来解决它,但我喜欢React.js,因为它非常简单.

在Chrome中,我正在尝试旋转一个多维数据集,但在此之后,该方突然不是难以处理的,并且父元素似乎优先.但是,当我创建该元素时pointer-events: none,body标记是第一个元素,因此在旋转之后由于某种原因90deg它会失去它的相互作用.

但是,当我只旋转它时89.9deg,没有问题,我可以与侧面的元素进行交互,我尝试摆弄,translateZ但这没有帮助.

我在这里重新创建它:http: //jsfiddle.net/TrySpace/GxJLV/

并且,在Firefox中它工作得很好......

有谁熟悉这个错误/差异以及如何解决它？

- 似乎我正在旋转的容器元素失去了它的所有相互作用,因为该容器元素是检查器中的一个平面,它保存了3d元素,因此在从侧面看的平面上没有相互作用？

更新:http://jsfiddle.net/TrySpace/GxJLV/2/(89.9度仍有效...)

有些问题我在文档中找不到答案.

我想要得到这样的结构:

 Node: 
   id: '1sdf12asd123',
   name: 'node1',
   history: 
      [ ts: 234234234234,
        data: { 'foo': 'bar' }
      ],
      ...

所以每个单独的节点都有很多历史项.而且我希望能够在push不覆盖任何内容的情况下获得新数据.

现在,我不希望将所有内容存储在每个节点下,而是存储在单独的文档中,因此我认为embedsMany适合于此:

{
  "name": "Node",
  "plural": "Nodes",
  "base": "PersistedModel",
  "idInjection": true,
  "options": {
    "validateUpsert": true
  },
  "properties": {
    "name": {
      "type": "string"
    }
  },
  "validations": [],
  "relations": {
    "history": {
      "type": "embedsMany",
      "model": "History",
      "foreignKey": "HistoryId"
    }
  },
  "acls": [],
  "methods": {}
}

所以历史可以简单地说:

{
  "name": "History",
  "base": "PersistedModel",
  "idInjection": true,
  "properties": {
    "ts": {
      "type": "Date"
    },
    "data": { …

使用 ngrx/redux，并尽可能遵循ngrx 示例应用程序。现在我在应用程序中的某个地方执行此操作：

get totalItems (): number {
   return sumBy(this._data.items, 'metadata.value');
}

其中_data是来自远程服务器的原始异步数据，并且是User.

现在我有一些选择：

1. 创建一个类User

constructor (public _data: UserResponse) {}

并有一些方法，例如：

get name (): string {
  return this._data.name;
}

get address (): string {
  return this._data.address;
}

此外，还有前面提到的totalItems以及其他获得与原始数据不同的结果的快捷方式。我不喜欢的是属性的重复，以及在哪里使用这个类；

• 我是否使用User中的类api-service，并将转换后的数据返回到模块@Effect，这反过来会触发SUCCESS或FAILED操作？
• @Effect我是否在操作触发之前 将其放入模块中？
  • 我在角度分量上使用extendsor吗？implements

另一件事是我们将转换后的数据应用于属性payload，这将使调试原始远程数据变得困难。

2. 另一种选择是在以下内容中转换此数据reducer：

电流减速机：

case ActionTypes.FETCH_USERS_SUCCESS:
   return {
     ...state,
     users: …

我正在尝试使用以下多维数据集获取透视视角:

http://jsfiddle.net/TrySpace/JvFSQ/5/

但我没有按照我的预期行事,我希望改变实际的视角.所以什么时候transformOrigin: Xpos+'%'+Ypos+'%'是100%-100%.我期望视角来自右下角,并看到立方体的右/底侧.但它似乎只是放大立方体.

我正在使用jstransit,因为设置.css( perspective-origin: X% X% )通过jQuery似乎没有做任何事情.

我想我还没完全理解3d CSS.

谁能看到我哪里出错了？

(Update1:​​当我编辑第一个<section>:并设置:transform: rotateY(1deg) rotateX(1deg),它似乎做得更少.好像转换必须发生,视角改变？http://jsfiddle.net/TrySpace/JvFSQ/6/)

(Update2:所以,当我将Y&X设置为90deg时,我会得到一些我想要的东西,尽管反过来.我的思路在哪里出错了？http://jsfiddle.net/TrySpace/JvFSQ/8/)