我是React的新手，我正在尝试在React组件中呈现静态CSS代码示例，如下所示：
React.createClass({
render: function() {
return (
<code> body { color: blue; } </code>
)
}
});
但是，这似乎不起作用。
有什么特殊的方法可以让我逃避这样的代码，还是我做错了什么？
我试图访问我的组件中的所有ref值并使用它们执行某些操作(例如,创建有效负载以发送到服务器)
我试图做一个简单的for..in循环,而不是在每个ref上使用getDOMNode().value但它不起作用.
var Hello = React.createClass({
getAllRefsValues: function() {
for(ref in this.refs) {
console.log(ref);
// ref.getDOMNode().value doesnt work here
}
},
render: function() {
return (
<div>
<button onClick={this.getAllRefsValues}>Get all props values</button>
<input type="text" ref="test1"/>
<input type="text" ref="test2"/>
<input type="text" ref="test3"/>
</div>
)
}
});
这是我正在使用的jsfiddle.
我有一种感觉,这可能不是一个好主意,但我不知道如何处理这个问题.
有人帮吗？
我真的遇到了理解React逻辑的问题.为什么这个IF不起作用？您可以假设所有类都存在,并且循环也在起作用.好吧,即使条件似乎工作,但我的页面上的输出仍然是空白的.....
var Feature = React.createClass({
componentDidMount: function(){
$('input.rating[type=number]').rating();
initFeatureInstallReady(this.props.feature.feature_id);
},
render: function(){
var backgroundColor = "white";
var item;
var props = this.props;
this.props.feature.slides.map(function(slide, i){
if(props.feature.feature_id == "start-home-away" && slide.slide_id == 'review'){
item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
<FeatureReviewHomeAway feature={props.feature} slide={slide} />
</div>;
}else if(props.feature.feature_id == "start-goto-sleep" && slide.slide_id == 'review'){
item = <div className={i == 0 ? "item active" : "item"} key={i} id={slide.slide_id}>
<FeatureReviewHomeAway feature={props.feature} slide={slide} />
</div>;
}else{
item = <div className={i …我正在使用 React 生成一个相当庞大且复杂的 DOM 树结构，但我选择不使用 JSX（只是为了避免最终且不可避免地再次从 JSX 转换为 JS）。此 DOM 的某些部分将根据某些（if-else）条件生成或对用户可见。在另一种情况下，可能需要一个循环来生成一些 HTML 元素等等。
然而，我找不到任何好的 atricles 来解释没有 JSX 的 React。
因此，请指导和展示如何在没有 JSX 的情况下使用 ReactJS并使用工厂、类、组件等。
没有足够的文档来说明这一点。
当我运行gulp时,我似乎遇到了将JSX文件编译为JS的问题.
Gulp依赖:
var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var runSequence = require('run-sequence');
我认为babelify会为我编译我的JSX,我不必担心.
然后我得到了我的构建文件:
gulp.task('build', function () {
return browserify({
entries: 'app.js',
extensions: ['.jsx'],
debug: true
})
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('dist'));
});
gulp.task('compress', function() {
return gulp.src('./dist/bundle.js')
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist'));
});
gulp.task('default', function(cb) {
runSequence('build','compress', cb);
});
我似乎在我的app.js文件中收到错误,我添加了我的第一个组件.
感谢先进的帮助.
****更新****
这是我在运行gulp后得到的错误:
events.js:85
throw er; // Unhandled 'error' event
^
SyntaxError: /Users/maxlynn/Documents/childcare-army/app.js: …一个来自React和JSX的新人的问题.可能有一个简单的答案,但我无法在任何地方找到它: - \
我有这个代码:
return (<div className='link-container' >
<a href="tel: + {this.props.item.value}">{this.props.item.value}</a>
</div>);
对我不起作用的是href值的连接.目前,生成的href值正是您所看到的,{this.props.item.value}不会替换为实际值,而是显示为字符串.我尝试了很多连接技巧,但似乎没有任何效果.我设法使其工作的唯一方法是将所有href值放在不同的变量中,如下所示:
var hrefValue = "tel:" + this.props.item.value;
return (<div className='link-container' >
<a href={hrefValue}>{this.props.item.value}</a>
</div>);
这个解决方案有效,但为这样的事情创建一个新的变量看起来有点奇怪.有更简单的方法吗？
谢谢!
我试图将1个节点作为另一个React组件的属性传递,如下所示:
render: function() {
return (
<div>
<div ref='statusCircle'></div>
<Popover trigger={ this.refs.statusCircle }></Popover>
</div>);
);
}
但是在Popover中,this.props.trigger为NULL.
我的代码有什么问题吗？
如何将node-ref作为属性传递给另一个React组件？
我的 MacBook 上安装了一个 vagrant box (ubuntu/trusty64)。我用变量 VVV 扩展了这个框 --> https://github.com/bradp/vv#os-x-installation 这使我能够创建新的 WordPress 安装（目前我有大约 10 个安装）。
我想彻底清理我的 MacBook 并安装一个新版本，但我不想丢失我的盒子和我所有的项目。如何在不丢失项目的情况下解决此问题？
props在React/JSX中多次访问相同的值时,建议将对象缓存在局部变量中吗？
var ItemComponent = React.createClass({
render: function() {
var cached = this.props.item;
return (
<div className={cached.class}>
<h1>{cached.heading}</h1>
<p>{cached.text}</p>
</div>
);
}
});