我有一个外部(对组件),可观察的对象,我想听取更改.当对象更新时,它会发出更改事件,然后我想在检测到任何更改时重新呈现组件.
使用顶级React.render这是可能的,但在一个组件中它不起作用(这有一定意义,因为该render方法只返回一个对象).
这是一个代码示例:
export default class MyComponent extends React.Component {
handleButtonClick() {
this.render();
}
render() {
return (
<div>
{Math.random()}
<button onClick={this.handleButtonClick.bind(this)}>
Click me
</button>
</div>
)
}
}
单击按钮会在内部调用this.render(),但这不是实际导致渲染发生的原因(您可以看到此操作因为创建的文本{Math.random()}不会更改).但是,如果我只是打电话this.setState()而不是this.render(),它可以正常工作.
所以我想我的问题是: React组件需要有状态才能重新渲染吗？有没有办法强制组件按需更新而不改变状态？
我有一个相对简单的问题,试图将内联脚本添加到React组件.到目前为止我所拥有的:
'use strict';
import '../../styles/pages/people.scss';
import React, { Component } from 'react';
import DocumentTitle from 'react-document-title';
import { prefix } from '../../core/util';
export default class extends Component {
render() {
return (
<DocumentTitle title="People">
<article className={[prefix('people'), prefix('people', 'index')].join(' ')}>
<h1 className="tk-brandon-grotesque">People</h1>
<script src="https://use.typekit.net/foobar.js"></script>
<script dangerouslySetInnerHTML={{__html: 'try{Typekit.load({ async: true });}catch(e){}'}}></script>
</article>
</DocumentTitle>
);
}
};
我也尝试过:
<script src="https://use.typekit.net/foobar.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
这两种方法似乎都没有执行所需的脚本.我猜这是一件我想念的简单事.有人可以帮忙吗？
PS:忽略foobar,我有一个真正的ID实际上在使用,我不想分享.
我有以下状态:
this.setState({ selected: { id: 1, name: 'Foobar' } });
然后我更新状态:
this.setState({ selected: { name: 'Barfoo' }});
由于setState被假定为合并,我希望它是:
{ selected: { id: 1, name: 'Barfoo' } };
但相反它吃了id,状态是:
{ selected: { name: 'Barfoo' } };
这是预期的行为,是什么解决方案只更新嵌套状态对象的一个属性？
我正在尝试将jQuery组件转换为React.js,而我遇到的一个问题是基于for循环渲染n个元素.
我理解这是不可能的,或者推荐,并且如果模型中存在数组,则使用它是完全合理的map.那很好,但是当你没有阵列时呢？相反,你有数值等于要渲染的给定数量的元素,那么你应该怎么做？
这是我的例子,我想根据它的层次级别为一个元素添加任意数量的span标记.所以在第3级,我想在文本元素之前使用3个span标签.
在javascript中:
for (var i = 0; i < level; i++) {
$el.append('<span class="indent"></span>');
}
$el.append('Some text value');
我似乎无法得到这个,或类似的东西在JSX React.js组件中工作.相反,我必须执行以下操作,首先将temp数组构建为正确的长度然后循环数组.
React.js
render: function() {
var tmp = [];
for (var i = 0; i < this.props.level; i++) {
tmp.push(i);
}
var indents = tmp.map(function (i) {
return (
<span className='indent'></span>
);
});
return (
...
{indents}
"Some text value"
...
);
}
当然,这不是最好的,或唯一的方法来实现这一目标？我错过了什么？
我正在尝试开始在ReactJS中构建一个站点.但是,当我试图将我的JS放在一个单独的文件中时,我开始收到此错误:"Uncaught SyntaxError:Unexpected token <".
我尝试添加/** @jsx React.DOM */到JS文件的顶部,但它没有修复任何东西.下面是HTML和JS文件.什么是错的任何想法？
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
编辑:我意识到我需要添加type="text/jsx"包含我的着陆器代码的脚本标签.但是,添加此内容并重新加载后,我收到此警告
"您正在使用浏览器内的JSX转换器.请务必预编译您的JSX以进行生产 - http://facebook.github.io/react/docs/tooling-integration.html#jsx "
然后是这个错误:
"XMLHttpRequest无法加载file:///Users/.../lander.js.交叉源请求仅支持协议方案:http,数据,chrome扩展,https,chrome-extension-resource."
为了让浏览器jsx转换工作,我似乎还需要做一些事情,但我不确定它是什么.
编辑:OOOOH我需要使用MAMP或其他什么东道主？
我正在制作并监听正常的DOM CustomEvent与父节点进行通信:
在孩子:
var moveEvent = new CustomEvent('the-graph-group-move', {
detail: {
nodes: this.props.nodes,
x: deltaX,
y: deltaY
},
bubbles: true
});
this.getDOMNode().dispatchEvent(moveEvent);
在父母:
componentDidMount: function () {
this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},
这有效,但有一种特定于React的方式会更好吗？
有没有办法将jsx从组件的渲染功能移动到单独的文件？如果是这样,我如何在渲染函数中引用jsx？
SyntheticKeyboardEvent除了null事件属性之外,我无法让任何React 处理程序注册任何东西.
我已经将这个组件隔离在一个小提琴中,并得到与我的应用程序相同的结果.谁能看到我做错了什么？
http://jsfiddle.net/kb3gN/1405/
var Hello = React.createClass({
render: function() {
return (
<div>
<p contentEditable="true"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>Foobar</p>
<textarea
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress}>
</textarea>
<div>
<input type="text" name="foo"
onKeyDown={this.handleKeyDown}
onKeyUp={this.handleKeyUp}
onKeyPress={this.handleKeyPress} />
</div>
</div>
);
},
handleKeyDown: function(e) {
console.log(e);
},
handleKeyUp: function(e) {
console.log(e);
},
handleKeyPress: function(e) {
console.log(e);
}
});
React.renderComponent(<Hello />, document.body);
我在我的应用程序中使用React/JSX以实现我想要的,Lodash.
我需要根据条件重复一个元素一定次数,我该怎么做？
这是元素:
<span className="busterCards">?</span>;
我这样分配它:
let card;
if (data.hand === '8 or more cards') {
card = <span className="busterCards">?</span>;
}
所以在这种情况下,我需要重复8次元素.使用Lodash的过程应该是什么？
我希望能够在我的react/jsx代码中为html标签使用自动完成功能.它适用于html文件.我可以配置sublime text 3为jsx文件启用标签自动完成吗？
reactjs ×9
react-jsx ×8
javascript ×7
autocomplete ×1
ecmascript-6 ×1
html ×1
jquery ×1
lodash ×1
sublimetext ×1
sublimetext3 ×1