我有一个ref已定义的元素,最终会被渲染到页面中:
<div ref="russian" ...>
...
</div>
我想访问DOM元素属性offset...或类似的东西.但是,我一直在努力,undefined而且我不知道为什么.经过一些搜索后,很明显refs只适用于一个文件,但除了这一页之外,我没有在任何地方使用它.我这样说是为了记录它:
console.log('REFS', this.refs.russian);
可能是什么导致了这个？
在React JSX中,我如何才能将以下文本包含在单引号中？还是其他可能需要转义的标点符号？
return (
<div>
<p>I've seen the movie.</p>
</div>
)
我正在尝试将反应连接到我的应用程序中.它是一个使用rails-rails的rails应用程序(虽然我不认为这是问题的一部分).我目前正在使用一个非常简单的1组件设置:
// react_admin.js.jsx
/** @jsx React.DOM */
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
React.render(
<CommentBox />,
document.getElementById('content')
);
我的html文件包含:
<body>
<div id="content"></div>
<script src="/assets/react.js?body=1"></script>
<script src="/assets/react_admin.js?body=1"></script>
</body>
我可以看到rails-react将我的react_admin.js.jsx转换为react_admin.js,如下所示:
/** @jsx React.DOM */
var CommentBox = React.createClass({displayName: 'CommentBox',
render: function() {
return (
React.DOM.div({className: "commentBox"},
"Hello, world! I am a CommentBox."
)
);
}
});
React.render(
CommentBox(null),
document.getElementById('content')
);
然而,chrome在Render.react()调用中引发了''Uncaught TypeError:undefined不是函数',它在"("和"CommentBox(null)"之间显示)
有人能告诉我我做错了什么吗？
我无法弄清楚为什么ReactJs找到"字符串"而不是我的点击处理程序方法.
这是我的代码:
define(["react"], function(React) {
return React.createClass({
pageUp: function() {
console.log("go next page");
},
pageDown: function() {
console.log("go prev page");
},
toggleMenu: function() {
console.log("toggle menu");
this.state.menuStatus = !this.menuStatus;
},
getInitialState: function() {
return {
// Toggle menu status; false -> closed | true -> opened
menuStatus: false
}
},
render: function() {
var _this = this;
return (
<div className="overlay-nav">
<ul className="up-down-arrows">
<li onClick="{this.pageUp}" className="arrow-up"><i className="fa fa-angle-up"></i></li>
<li onClick="{_this.pageDown.bind(_this)}" className="arrow-down"><i className="fa fa-angle-down"></i></li>
</ul>
<div onClick="{_this.toggleMenu}" className="toggleMenu"><i className="fa fa-bars"></i></div>
</div> …我正在尝试建立一个基本的反应示例 - 使用jspm/systemjs和babel.我在这里有这个代码来显示一个简单的页面,我收到一个错误
import React from 'react';
export default React.createClass({
displayName: 'MainComponent',
propTypes: {
item: React.PropTypes.object
},
render: function render() {
return (
<div class="builder-conteiner">
<div>;
);
}
});
React.render(<MainComponent />, document.getElementById('app'))
没有任何东西出现,控制台错误的"未终止的JSX内容",并且babel指向react.render行,如下所示:
17 | React.render(<MainComponent />, document.getElementById('app'))
| ^
这还是新手,所以我不确定这里出了什么问题,不胜感激任何帮助.谢谢!
我试图在React JSX中使用switch case有条件地渲染组件.我正在尝试构建从特定json结构读取并呈现数据的内容.由于可以有许多不同的组件和数据,我试图动态呈现它.请参阅下面的代码,我没有收到任何错误,但组件没有得到渲染.在我的HTML中,我只能看到.这意味着循环不起作用.我尝试在vanilla JS中使用相同的循环,它的工作原理.
var myPackage = [{
sectionInfo:[{
elementType: 1,
text: "This is text from element type 1"
}]
},
{
sectionInfo:[{
elementType: 2,
text: "This is text from element type 2"
}]
}];
var App = React.createClass({
render: function(){
var elements = [];
elements = myPackage.map(function(myObj){
myObj.sectionInfo.map(function(myObj1){
switch(myObj1.elementType){
case 1: return(
<Component1 text = {myObj1.text}/>
);
break;
case 2: return(
<Component2 text = {myObj1.text}/>
)
break;
}
})
});
return(
<div className="App">
{elements}
</div>
)
}
});
var …这是我的代码:
const func = () => {
return (
<div >
you're free
</div>
)}
以某种方式,eslint标记"你是免费的"行有错误 error HTML entities must be escaped react/no-unescaped-entities
但是从我可以看到jsx已经逃脱了撇号.我可以看到这些单词you're free没有问题.如果我将其转义为',那么我将很难搜索字符串(我希望you're free在编辑器中搜索返回命中.但显然编辑器会错过,因为文本实际上是you're free)
那么解决这种eslint异常的最佳方法是什么？
我正在尝试创建一个密码确认功能,只有在用户离开确认字段后才会出现错误.我正在使用Facebook的React JS.这是我的输入组件:
<input
type="password"
placeholder="Password (confirm)"
valueLink={this.linkState('password2')}
onBlur={this.renderPasswordConfirmError()}
/>
这是renderPasswordConfirmError:
renderPasswordConfirmError: function() {
if (this.state.password !== this.state.password2) {
return (
<div>
<label className="error">Please enter the same password again.</label>
</div>
);
}
return null;
},
当我运行页面时,输入冲突的密码时不会显示该消息.
我想将一个回调传递给一个双重嵌套的组件,虽然我能够有效地传递属性,但我无法弄清楚如何将回调绑定到正确的组件以便它被触发.我的结构看起来像这样:
-OutermostComponent
-FirstNestedComponent
-SecondNestedComponent
-DynamicallyGeneratedListItems
单击列表项时应触发回调,即OutermostComponents方法"onUserInput",但我得到"未捕获错误:未定义不是函数".我怀疑问题在于我如何在第一个内部渲染SecondNestedComponent,并将其传递回调.代码看起来像这样:
var OutermostComponent = React.createClass({
onUserInput: //my function,
render: function() {
return (
<div>
//other components
<FirstNestedComponent
onUserInput={this.onUserInput}
/>
</div>
);
}
});
var FirstNestedComponent = React.createClass({
render: function() {
return (
<div>
//other components
<SecondNestedComponent
onUserInput={this.onUserInput}
/>
</div>
);
}
});
var SecondNestedComponent = React.createClass({
render: function() {
var items = [];
this.props.someprop.forEach(function(myprop) {
items.push(<DynamicallyGeneratedListItems myprop={myprop} onUserInput={this.props.onUserInput}/>);}, this);
return (
<ul>
{items}
</ul>
);
}
});
如何正确地将回调绑定到适当的嵌套组件？
如何将没有价值的道具传递给反应组件？
<SomeComponent disableHeight> {/* here */}
{({width}) => (
<AnotherComponent
autoHeight {/* and here */}
width={width}
height={300}
{...otherProps}
/>
)}
</SomeComponent>
注意 - 没有为这些道具指定默认道具值.
我似乎无法找到任何引用,但通过观察true默认情况下分配给它们的属性的值.
react-jsx ×10
reactjs ×9
javascript ×7
babeljs ×1
callback ×1
eslint ×1
html ×1
loops ×1
onblur ×1
react-rails ×1