我正在尝试设置我的React.js应用程序,以便只有在我设置的变量为true时才会呈现.
我的渲染功能的设置方式如下:
render: function() {
var text = this.state.submitted ? 'Thank you! Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
return (
<div>
if(this.state.submitted==false)
{
<input type="email" className="input_field" onChange={this._updateInputValue} ref="email" value={this.state.email} />
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true}>
<div className="button-row">
<a href="#" className="button" onClick={this.saveAndContinue}>Request Invite</a>
</div>
</ReactCSSTransitionGroup>
}
</div>
)
},
基本上,这里的重要部分是if(this.state.submitted == false)部分(我希望在提交的变量设置为false时显示这些div).
但是在运行时,我在问题中得到错误:
未捕获的错误:解析错误:第38行:相邻的JSX元素必须包装在一个封闭的标记中
这是什么问题？我可以用什么来完成这项工作？
有没有办法将html呈现为像PNG一样的图像？我知道它可以用canvas,但我想渲染像div这样的标准html元素.
我有一个问题,我没有想法,如何解决.在我的react组件中,我显示了一长串数据,底部显示了很少的链接.点击任何链接后,我用新的链接集合填写列表,需要滚动到顶部.
问题是 - 如何在渲染新集合后滚动到顶部？
'use strict';
// url of this component is #/:checklistId/:sectionId
var React = require('react'),
Router = require('react-router'),
sectionStore = require('./../stores/checklist-section-store');
function updateStateFromProps() {
var self = this;
sectionStore.getChecklistSectionContent({
checklistId: this.getParams().checklistId,
sectionId: this.getParams().sectionId
}).then(function (section) {
self.setState({
section,
componentReady: true
});
});
this.setState({componentReady: false});
}
var Checklist = React.createClass({
mixins: [Router.State],
componentWillMount: function () {
updateStateFromProps.call(this);
},
componentWillReceiveProps(){
updateStateFromProps.call(this);
},
render: function () {
if (this.state.componentReady) {
return(
<section className='checklist-section'>
<header className='section-header'>{ this.state.section.name } …我正在尝试重新使用我编写的提供面板样式的html组件.就像是:
<div class="v-panel">
<div class="v-panel-tr"></div>
<h3>Some Title</h3>
<div class="v-panel-c">
.. content goes here
</div>
<div class="v-panel-b"><div class="v-panel-br"></div><div class="v-panel-bl"></div></div>
</div>
所以我看到渲染需要一个块.我想我可以这样做:
# /shared/_panel.html.erb
<div class="v-panel">
<div class="v-panel-tr"></div>
<h3><%= title %></h3>
<div class="v-panel-c">
<%= yield %>
</div>
<div class="v-panel-b"><div class="v-panel-br"></div><div class="v-panel-bl"></div></div>
</div>
我想做的事情如下:
#some html view
<%= render :partial => '/shared/panel', :locals =>{:title => "Some Title"} do %>
<p>Here is some content to be rendered inside the panel</p>
<% end %>
不幸的是,这不适用于此错误:
ActionView::TemplateError (/Users/bradrobertson/Repos/VeloUltralite/source/trunk/app/views/sessions/new.html.erb:1: , unexpected tRPAREN
old_output_buffer = output_buffer;;@output_buffer = ''; …我正在尝试生成包含一些HTML的JSON响应.因此,我有/app/views/foo/bar.json.erb:
{
someKey: 'some value',
someHTML: "<%= h render(:partial => '/foo/baz') -%>"
}
我希望它渲染/app/views/foo/_baz.html.erb,但它只会渲染/app/views/foo/_baz.json.erb.传球:format => 'html'没有帮助.
我试图在JSON中渲染来自多个模型的结果.我的控制器中的以下代码仅呈现第一个结果集:
def calculate_quote
@moulding = Moulding.find(params[:id])
@material_costs = MaterialCost.all
respond_to do |format|
format.json { render :json => @moulding }
format.json { render :json => @material_costs }
end
end
任何帮助将不胜感激,谢谢.
我目前正在开始一个动画项目.在项目中,我将有超过40000 div秒,并迭代动画它们.如果divs中的任何一个处于被动状态(即它不至少动画2秒),我将不会显示它们以提高动画性能.
问题是:哪个css属性最适合这个？
.passive1{
display:none
}
.passive2{
visibility:hidden;
}
.passive3{
opacity:0;
}
我如何测量渲染性能,如fps,gpu使用情况？
我想在一些嵌入式html中调用一个函数.我尝试了以下但是没有调用该函数.这是在render方法中调用函数的错误方法吗？
import React, { Component, PropTypes } from 'react';
export default class PatientTable extends Component {
constructor(props) {
super(props);
this.state = {
checking:false
};
this.renderIcon = this.renderIcon.bind(this);
}
renderIcon(){
console.log("came here")
return(
<div>Function called</div>
)
}
render() {
return (
<div className="patient-container">
{this.renderIcon}
</div>
);
}
}
我正在研究一些应该能够在我的应用程序中阅读PDF的东西,并且我希望将PDF视图放在我的自定义布局中.我更喜欢Android PDF Viewer但是当我执行zoomIn时,zoomOut需要花费太多时间.
所以目前我应该使用MuPDF开源项目集成到我的项目中,它基于JNI,我不习惯它.
我正在使用Cygwin为本机代码构建库.因此,我不清楚几件事情:
如何在我的项目中整合MuPDF(根据我的问题标题)？
一旦我成功整合它,那么如何将PDF阅读器放入我的自定义视图(在XML或programmaticaly中)？
我有一个控制器,既响应html和js.该html视图使得整个页面(包括页眉和页脚),而js只替换#main.除了页眉和页脚之外,两种格式都呈现相同的内容.我可以通过三个文件获得此效果:
_show.html.erb
<div>Content!</div>
show.html.erb
<%= render "show" %>
show.js.erb
$("#main").fadeIn("<%= escape_javascript(render 'show') %>");
这有效,但我更喜欢如果我不需要单独的_show部分.不幸的是,这不起作用:
show.html.erb
<div>Content!</div>
show.js.erb
$("#main").fadeIn("<%= escape_javascript(render 'show') %>");
由于Rails会查找show部分视图,而不是实际视图.
有没有办法让Rails查找视图文件,而不是部分？