标签: react-jsx
我可以在 Javascript 或 JSX 中将解包对象作为参数传递吗？
var data = [
{author: 'foo', comment: 'nice'},
{author: 'bar', comment: 'wow'}
];
var CommentBox = React.createClass({
render: function () {
var CommentNodes = this.props.data.map(function (comment) {
return (
<Comment author={comment.author} comment={comment.comment}>
</Comment>
);
});
return (
<div className="comment-box">
{CommentNodes}
</div>
);
}
});
var Comment = React.createClass({
render: function () {
return (
<div className="comment-box comment">
<h2 className="comment-author">
{this.props.author}
</h2>
{this.props.comment}
</div>
);
}
});
React.render(<CommentBox data={data}/>, document.getElementById("example"));
在这段代码中，我只是将参数传递给Commentusing data。由于data是 a object，它类似于 Python …
推荐指数
解决办法
查看次数
如果像 <br> 这样的自关闭标签没有关闭，JSX 中是否有一个 API 可以忽略？
我正在使用 JSX 创建一个简单的 ReactJS 组件，如下所示。
<script type="text/jsx">
var HelloWorld = React.createClass({
render: function() {
return (
<div class="ui left icon input">
<input placeholder="Search users..." type="text" />
<i class="users icon"></i>
</div>
);
}
});
React.render(<HelloWorld />, document.body);
</script>
如果我关闭输入标签，上面的代码工作正常<input placeholder="Search users..." type="text" />。如果我不关闭标签<input placeholder="Search users..." type="text">，JSX 会抛出这个错误并且 React/JSX 组件不会被渲染：
我有一些遗留代码，其中没有关闭诸如<input >, 之<br>类的标签。根据 W3C，关闭这些标签也不是强制性的。我想使用 JSX 将此代码移动到 React 组件。但是我希望 JSX 忽略自关闭/无效标签是否关闭。
有没有 api 或方法来配置 JSX 来忽略这个？
推荐指数
解决办法
查看次数
React，无法选择<select>的第一个选项
我<select>从一个数组中渲染一个盒子。我的数组如下所示：
options: [
{"id":1,"name":"Option1"},
{"id":2,"name":"Option2"},
{"id":3,"name":"Option3"}
];
我map在数组中找到所有选项，然后在map. 但是，我可以从选择中选择任何选项，第一个除外。
这是我的选择：
<select
className="form-control"
name={this.props.name}
onChange={this.handleChange.bind(this)}>
{(Array.isArray(this.props.options) && this.props.options.length > 0) ? this.props.options.map(option => {
return (
<option key={option.id} value={option.id}>{option.name}</option>
)
}) : (<option>No Options Found</option>)}
</select>
我该怎么做，才能选择第一个选项？我究竟做错了什么？
推荐指数
解决办法
查看次数
ReactJS + Redux：如何触发按钮打开带有属性电子邮件的 Mac 邮件/Windows 邮件？
我有一个按钮和一个包含电子邮件地址的字符串属性。单击按钮后，我希望它打开带有字符串属性的电子邮件地址的 Mac 邮件/Windows 邮件收件人：
我该怎么做？任何指导或见解将不胜感激！
推荐指数
解决办法
查看次数
React Native：为什么 <TextInput/> 不以 flexbox 居中？
在 React Native 中，我有一个<TextInput/>但 flexbox 样式设置为居中的但它仍然没有，而是只是坐在左侧，而只是垂直居中。我用 simple 测试了它<Text/>并且它正确居中。
如何<TextInput/>使用 flexbox 居中？
这是代码：
render() {
return (
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}>
<TextInput
style={{fontWeight: 'bold', height: 18, color: 'red'}}
placeholderStyle={{fontWeight: 'bold'}}
placeholderTextColor='red'
placeholder='Center Me'
/>
</View>
)
}
}
先感谢您！
编辑 - 添加了其他样式
<View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}>
<TextInput
onChangeText={this._handleName}
value={this.props.name}
placeholderTextColor='white'
placeholder='Put in name'
style={{
backgroundColor: 'black',
borderWidth: 0,
borderRadius: 15,
width: 250,
height: 70,
fontFamily: 'Roboto',
fontSize: 20, …推荐指数
解决办法
查看次数
componentWillMount 未在渲染前完成
我在 reactjs 中遇到一些困难。据我所知，componentWillMount 是在组件呈现之前使用 ajax 调用加载数据的地方。我有一个简单的项目，它使用加载的数据填充面板堆栈并将其显示在板上。然而，来自 ajax 调用的数据在渲染组件之前没有设置，这导致使用空数组渲染板。以下是我的完整来源：
import React from "react";
export class Panel extends React.Component{
render() {
return (
<div>
<div className="row panel">
<div className="col-sm-12 header">sfsfsf</div>
<div className="col-sm-12 body">fsdfsfs</div>
<div className="col-sm-12 footer">fasfaf</div>
</div>
</div>
);
}
}
作为问题根源的 Board 类如下：
import React from "react";
import {Panel} from "./Panel";
export class Board extends React.Component{
constructor(props){
super();
this.state={news: []};
}
componentWillMount(){
this.state={news: []};
$.ajax({
url: "http://localhost:3003/json.txt",
dataType: 'json',
cache: false,
success: function(data) {
var arr=[];
for (var key in data) …推荐指数
解决办法
查看次数
在每个文件的顶部添加“@jsx react.dom”的功能是什么？
什么是功能：
/** @jsx React.DOM */
我已经看到这一行被添加到我当前项目中这么多文件的顶部，但我很困惑为什么添加它。:(
推荐指数
解决办法
查看次数
React - 如何动态创建属性
我有2个属性连接到2道具:aria-hidden和aria-label.
什么时候aria-hidden是真的,它只显示一个.如果它是假的,它只显示aria-label.
我写了这段代码,但它并不干......我怎样才能改进它？
render() {
let svgMarkup = '';
if (this.props.hidden) {
svgMarkup = (
<svg role="img" aria-hidden="true">
...
</svg>
);
} else {
svgMarkup = (
<svg role="img" aria-label={ this.props.label }>
...
</svg>
);
}
return svgMarkup;
}
推荐指数
解决办法
查看次数
在 React 中更改图标的颜色
我有一个 React 组件，其中包含 div 元素的迭代，如下所示：
render(){
return(
<div className="col-md-12">
{this.state.pageOfItems.map(opration =>
<div className=" col-md-4 icondiv" key={opration.id}
onClick={this.selectOperation.bind(this,opration,true)}>
<FontAwesome name="square" style={{ ariaHidden:true, fontSize:'35px'}}/>
<span className="displayblock">{opration.name}</span>
</div>
)}
</div>
);
}
现在我的问题是当我执行 onClick 方法时，我想更改单击的 div 的方形图标颜色。剩余图标的颜色应该相同。现在，当我单击另一个 div 的图标时，应该会发生同样的情况。我怎样才能做到这一点。我知道我可以将 css 颜色设置为不同但如何识别特定的 div 并更改颜色？
推荐指数
解决办法
查看次数
重新呈现ReactJS组件会挂起浏览器
我一直在尝试使用ReactJS创建基于组件的UI,而不是我通常的一百万个全局函数,变量和不可重用标记的slapdash方法.到目前为止,我真的很喜欢React,但我遇到了绊脚石.
请考虑以下组件布局
EventView
EventViewSidebar
EventViewList
EventViewListRow
EventViewDetail
在此布局中,EventViewListRow每个唯一键存在多次出现.单击EventViewListRow应该更新的实例EventViewDetail以及该项目的详细信息.
这是render顶级EventView组件的功能:
render: function () {
return (
<div className="event-view row-fluid">
<div className="event-view__sidebar col-md-4">
<EventViewSidebar projectId={this.state.projectId} />
</div>
<div className="event-view__content col-md-8" id="eventDetail">
</div>
</div>
);
}
这是EventViewDetail组件
var EventViewDetail = React.createClass({
getInitialState: function () {
return { eventId: 0 };
},
render: function () {
if (this.state.eventId === 0) {
return (<h3>Nothing selected</h3>);
}
else {
return (
<div>
{this.state.eventId}
</div> …推荐指数
解决办法
查看次数