是的,我可能在这里错过了明显的但是我得到了一个'未捕获的TypeError:undefined不是一个函数'我似乎是.map()这是问题,但我不明白为什么.
var idealist = React.createClass({
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this)
});
},
handleButtonClick: function(input) {
// do stuff //
},
getInitialState: function() {
return {data: []};
},
componentWillMount: function() {
this.loadCommentsFromServer();
setInterval(this.loadCommentsFromServer, this.props.pollInterval);
},
render: function() {
var clickFunction = this.handleButtonClick;
var ideas = this.state.data.map(function(i){
return <ideabox data={i} onButtonClick={clickFunction} />;
});
return (
<div className="idealist">
{ideas}
</div>
);
}
});
React.renderComponent(
<idealist url="/json/quotes.php" pollInterval={2000}/>,
document.getElementById('quoteList')
);
如果我将其更改为var ideas = this.state.data我没有收到任何错误,JSON数据格式正确,可能出错？
我正在创建一个传单地图组件,这是一个关于plunker的例子
http://plnkr.co/edit/LkghwOcby49XESdGb782?p=preview
这是代码
leaflet.jsx
/** @jsx React.DOM */
/*jshint indent: 2, node: true, nomen: true, browser: true*/
/*global React */
'use strict';
module.exports = React.createClass({
getInitialState: function () {
return {
map: {}
};
},
componentDidMount: function() {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
this.setState({map: map});
},
modifyMap: function (method, options) {
this.setState({
map : this.state.map[method](options.latLong, options.zoom, options.zoom_options)
});
},
render: function () {
return (
/* jshint ignore:start */
<div id="map"></div> …我正在尝试使用没有JSX的React.js组件并收到这样的警告:
Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://fb.me/react-legacyfactory
我已经访问了链接,但建议的createFactory解决方案没有帮助我:/
app.js
var React = require('react/addons');
var TagsInput = React.createFactory(require('./tagsinput')); // no luck
var TagsComponent = React.createClass({
displayName: "TagsComponent",
saveTags: function () {
console.log('tags: ', this.refs.tags.getTags().join(', '));
},
render: function () {
return (
React.createElement("div", null,
React.createElement(TagsInput, {ref: "tags", tags: ["tag1", "tag2"]}),
React.createElement("button", {onClick: this.saveTags}, "Save")
)
);
}
});
React.render(React.createElement(TagsComponent, null), document.getElementById('tags'));
tagsinput.js
https://raw.githubusercontent.com/olahol/react-tagsinput/master/react-tagsinput.js
我无法弄清楚这里有什么问题？
我编写了这段代码,目前正在与onClick事件中的一个bug争论.我有两个事件,子元素上的onClick事件和顶级父元素上的onChange事件.
预期的行为应该是更改当前在Container组件中保存的activeAccount变量.为此,我在AccountRow组件上添加了一个onClick处理程序,然后应该调用顶级父级的onChange函数.
但是,行
'this.props.onChange(this.props.account)',
在
handleClick: function(e) {
this.props.onChange(this.props.account);
},
意味着使用参数'this.props.account'调用父函数,
给我这个错误:
Uncaught TypeError: this.props.onChange is not a function.
我最初认为这是一个范围问题,但我补充说
{...this.props}
在父容器组件中的每个子项和嵌套子项上.因此,所有道具都应该传播到AccountRow组件.然而,问题仍然存在.
var ACCOUNTS = [
{name: 'cash on hand'},
{name: 'savings account'},
{name: 'shared account'},
{name: 'my second wallet'}
];
var TRANSACTIONS = [
{date: '', name: 'Bananas', amount: 6, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Apples', amount: 2.50, category: 'Groceries', account: 'cash on hand'},
{date: '', name: 'Cash withdrawal', amount: 250, account: 'savings account'}
]; …我试图使用ReactCSSTransitionGroup为列表插入和删除设置动画,但删除动画始终仅动画列表的最后一项而不是正在删除的项.
这是一个jsbin来说明这个问题.尝试按"添加"按钮以验证插入动画确实按预期工作,然后单击任何项目旁边的"x"以查看列表的最后一项是动画而不是您尝试删除的问题.
在设置TransitionGroup时我做错了什么,或者我在CSS转换定义中遗漏了什么？
我想根据组件的状态在Button上设置disabled属性,如下所示:
render() {
return (
<button type="button" {this.state.submitting ? 'disabled' : ''}
onClick={ this.handleSubmit }>Submit</button>
);
}
目前我在开场时遇到意外的令牌错误{,我错过了什么？
我是React的新手,我创建了一个显示用户名用户的导航栏
<NavItem eventKey={4} href="#">{this.state.name}</NavItem>
但问题是如果用户没有登录,由于this.state.name未定义,我收到错误.有没有什么方法可以检查this.state.name是否在将其作为导航栏的一部分进行定义之前定义,还是有更好的方法来摆脱这个错误？
我需要在组件存储在变量中之后设置它的道具,这里是伪代码:
render(){
let items = [{title:'hello'}, {title:'world'}];
let component = false;
switch (id) {
case 1:
component = <A />
break;
case 2:
component = <B />
break;
}
return(
items.map((item, index)=>{
return(
<span>
{/* SOMETHING LIKE THIS WOULD BE COOL - IS THAT EVEN POSSIBLE*/}
{component.props.set('title', item.title)}
</span>11
)
})
)
}
在里面return我运行一个循环,我需要为存储在变量中的组件设置道具....如何设置我之前存储在变量中的组件的道具？
我遵循将多属性标签分解为多行的常见模式,例如.
<div
className="foo"
style={{ fontWeight: "bold" }}
/>
我想在声明中添加一条评论,例如.
<div
className="foo"
{/* This is only temporary */}
style={{ fontWeight: "bold" }}
/>
但是上面的语法不起作用; 我明白了:
SyntaxError: Unexpected token, expected ... (45:96)
(指着收盘}于temporary */})是否可以添加注释标签内的JSX,如果是这样,我应该使用什么语法？
在以下代码的第4行,ESLint给我一个解析错误说:
意外的令牌=
我想知道为什么会这样？代码运行正常.我究竟做错了什么？
import { Component, PropTypes } from 'react';
export default class MainApp extends Component {
static propTypes = {
children: PropTypes.any.isRequired
}
componentWillMount() {
require('./styles/main.styl');
}
render() {
return (
<div>
{this.props.children}
</div>
);
}
}