我有以下json:
{
"comments":[
{
"id":1,
"comment_text":"asdasdadasdsadsadadsa",
"author":"adsfasdasdsad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:16:44.173Z",
"updated_at":"2014-10-16T23:16:44.173Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
},
{
"id":2,
"comment_text":"idlsfghlskdhvbsldfhjdslifds\nzf\ndsf\nds\nf\ns\nf\ns\nfds\nfsdjghfsdligjhsepfiguhefdliguhefldiughfeliughnfesg\nf\nsg\ns\ng\ns\ndf\nsd\nf\nsdgsofughlefidughls;uhgsuhg.vskjfhglsiuhg.sfv",
"author":"asdsdasdad",
"post_id":1,
"ancestry":null,
"archived":false,
"created_at":"2014-10-16T23:17:02.270Z",
"updated_at":"2014-10-16T23:17:02.270Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":3,
"comment_text":"fdsfdsfdsfsdfsfsdf",
"author":"sdfdsfdsfdsfds",
"post_id":1,
"ancestry":"2",
"archived":false,
"created_at":"2014-11-28T17:39:47.059Z",
"updated_at":"2014-11-28T17:39:47.059Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":4,
"comment_text":"fdsfdsfdsdsfdsfds",
"author":"sdfsdfdsfsdfdsfds",
"post_id":1,
"ancestry":"2/3",
"archived":false,
"created_at":"2014-11-28T17:39:53.049Z",
"updated_at":"2014-11-28T17:39:53.049Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
{
"id":5,
"comment_text":"sdfdsfdsfdsfdssdfsdfdsfdsfdsfds",
"author":"sdfsdfdsfdsfdsf",
"post_id":1,
"ancestry":"2/3/4",
"archived":false,
"created_at":"2014-11-28T17:40:02.032Z",
"updated_at":"2014-11-28T17:40:02.032Z",
"is_moderated":false,
"avatar_url":null,
"slug":null,
"blog_id":2,
"children":[
]
}
]
}
] …我正在尝试<img>通过JavaScript 找到中心的宽度.
尝试计算此react.js DOM节点的宽度返回0.
var Player = React.createClass({
componentDidMount:function(){
var imgEl = this.refs.imgSize.getDOMNode();
console.log(imgEl.offsetWidth);
},
render: function () {
return (
<img ref="imgSize" src={this.props.imageURL} />
);
}
});
我是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.
我有一种感觉,这可能不是一个好主意,但我不知道如何处理这个问题.
有人帮吗？
当我运行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: …这不会显示图像，但仍可以用作按钮。
<button><img src={"./img/google.png"} /></button>
我的文件夹设置是/user/img/google.png和/user/loginGoogle.jsx，所以我认为源没有问题
在使用Bootstrap网格渲染React组件时面对这个有趣的事情,假设我需要col-md-6在a中渲染两个row,每个<Book />组件都放在一个col-md-6 div块中
+---------------------+
| col-md-6 | col-md-6 |
| Book | Book | <--- row
|---------------------|
| col-md-6 | col-md-6 |
| Book | Book | <--- row
+---------------------+
它预计形成类似于以下结构,
<Row>
<Col>
<Book />
</Col>
<Col>
<Book />
</Col>
</Row>
<Row>
<Col>
<Book />
</Col>
<Col>
<Book />
</Col>
</Row>
我尝试渲染如下,
export default class BookList extends React.Component {
render() {
let books = [];
lodash.each(this.props.books, function (book, index) {
index % …我有一个圆圈和一个grradient来填充它,我放入渐变,并通过样式填充称他为路径.
import React,{PropTyoes} from 'react';
import {connect} from 'react-redux';
import * as Actions from '../controllers/Actions';
export default class MyComp extends React.Component {
constructor(props, context){
super(props, context);
}
render(){
return (
<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" viewBox="0 0 983.4 983.4">
<g>
<linearGradient id="linear-gradient" gradientUnits="userSpaceOnUse" x1="1041.6901" y1="169.485" x2="1383.9301" y2="169.485" gradientTransform="matrix(1 0 0 -1 -761.14 398.97)">
<stop offset="0.14" stop-color="#2f343b" stop-opacity="0"/>
<stop offset="0.43" stop-color="#337082" stop-opacity="0.41"/>
<stop offset="0.67" stop-color="#369fb9" stop-opacity="0.73"/>
<stop offset="0.79" stop-color="#37b1cf" stop-opacity="0.85"/>
</linearGradient>
<path id="gradient" style={{fill:'url(#linear-gradient)'}} className="cls-200" d="M622.8,119.6C512.1,72,385.5,78.9,280.6,138.1l134.3,232.6c31.2-16.8,68.2-18.5,100.9-4.8 L622.8,119.6z">
</g>
</svg>
它没有用,有什么建议吗？
如何使此功能工作,在初始化和返回之间附加到我的反应对象
render () {
var users = this.state.users,
appContainer = <div id="container"></div>
for (var i = 0; i < users.length; i++) {
// this doesn't work
appContainer.appendChild(this.createCard(users[i]));
}
return appContainer;
}
我只是好奇,你怎么会做这样的事情,因为动作脚本允许XML的传球和动态追加-它有效地与文体上诉正常JSON对象,我看到了<div>,它很容易看出我与HTML的形式工作比myHtmlDiv... ..即使我把它投射到一个变量,很容易看到肉的位置,并初始化它的许多属性
试图让一个Electron项目使用React及其.jsx文件.我已经完成了各种教程,github问题,SO答案等,但我还没有找到一个明确的指南来设置一个与React及其.jsx文件一起使用的Electron项目.
要使其工作,需要哪些步骤,依赖项和配置？
react-jsx ×10
reactjs ×10
javascript ×4
jsx ×2
babeljs ×1
electron ×1
gulp ×1
html ×1
svg ×1
svg-animate ×1