我正在尝试通过编写类似于体育名册的小型UI来学习React概念,尤其是re:状态和动态UI。我已经在下面添加了代码,整个应用程序+视觉效果位于http://codepen.io/emkk/pen/dGYXJO。这个应用程序基本上是根据我之前定义的玩家对象数组创建玩家卡的。
我想在单击按钮时对玩家卡片进行排序。我创建了一个<Sort/>
呈现上述按钮的组件。我将附加事件侦听器,但不知道如何在我的<Roster/>
组件中反映出来。我尝试了许多不同的方法,this.state
但似乎无法使它起作用。因此,请您对实施排序或常规建议的任何帮助大加赞赏!
class ProfileCard extends React.Component {
render() {
return (
<section className="profile-card">
<figure>
<img src={this.props.player.picURL} alt={this.props.player.Name}></img>
<article>
<ul>
<li>{this.props.player.Name}</li>
<li>{this.props.player.position}, #{this.props.player.number}</li>
<li>{this.props.player.Club}</li>
<li>{this.props.player.Height} ({this.props.player.Meters} m)</li>
<li>{this.props.player.Age} years old</li>
</ul>
</article>
</figure>
</section>
);
}
}
class Roster extends React.Component {
render() {
// Store sorted version of data
// Where I'd implement selected sorting
var sorted = this.props.players.sort();
/*
* Create player cards from JSON collection
*/
var cards = [];
sorted.forEach(function(player) {
if (player.year > 2000) {
cards.push(<ProfileCard player={player} />);
}
});
return (<div>{cards}</div>);
}
}
class Sort extends React.Component {
render() {
return (
<div className="sort-section">
<h1>Sort by</h1>
<div className="pill" id='age'>Age</div>
<div className="pill" id='Meters'>Height</div>
<div className="pill" id='Name'>Name</div>
</div>
)
}
}
class SortablePlayerTable extends React.Component {
render() {
/*
* Prefix some interestings stats
* before roster
*/
var ages = [], heights = [];
this.props.players.forEach(function(player) {
if (player.year > 2000) {
ages.push(player.Age);
heights.push(player.Meters);
}
});
var avgAge = (ages.reduce( (a, b) => a + b) / 12).toPrecision(3);
var avgHeights = (heights.reduce( (a, b) => a + b) / 12).toPrecision(3);
// Return page with stats data and Roster
return (
<div>
<h1>2012 Olympic Men's Basketball Team</h1>
<h2>Average Age: {avgAge} years old</h2>
<h2>Average Height: 6 ft 7 in ({avgHeights} m)</h2>
<Sort/>
<Roster
players={this.props.players}
/>
</div>
);
}
};
React.render(
<SortablePlayerTable players={PLAYERS} />,
document.getElementById('container')
);
解:
使我绊倒的另一件事是我无法访问this.setState
,不断this.setState is a not a function
出错。但是,使用ES6箭头函数this
为我的处理程序函数进行词法绑定可以挽救我。
class ProfileCard extends React.Component {
render() {
return (
<section className="profile-card">
<figure>
<img src={this.props.player.picURL} alt={this.props.player.Name}></img>
<article>
<ul>
<li>{this.props.player.Name}</li>
<li>{this.props.player.position}, #{this.props.player.number}</li>
<li>{this.props.player.Club}</li>
<li>{this.props.player.Height} ({this.props.player.Meters} m)</li>
<li>{this.props.player.Age} years old</li>
</ul>
</article>
</figure>
</section>
);
}
}
class Roster extends React.Component {
render() {
// Create player cards from sorted, dynamic JSON collection
var cards = [];
this.props.players.forEach(function(player) {
if (player.year > 2000) {
cards.push(<ProfileCard player={player} />);
}
});
return (<div>{cards}</div>);
}
}
class Sort extends React.Component {
sortRoster(field){
var players = this.props.players;
this.props.sortRosterStateBy(field, players);
}
render() {
return (
<div className="sort-section">
<h1>Sort by</h1>
<div className="pill" onClick={this.sortRoster.bind(this,'Age')} >Age</div>
<div className="pill" onClick={this.sortRoster.bind(this,'Meters')} >Height</div>
<div className="pill" onClick={this.sortRoster.bind(this,'Name')} >Name</div>
<div className="pill" onClick={this.sortRoster.bind(this,'position')} >Position</div>
<div className="pill" onClick={this.sortRoster.bind(this,'number')} >Number</div>
<div className="pill" onClick={this.sortRoster.bind(this,'Club')} >Club</div>
</div>
)
}
}
class SortablePlayerTable extends React.Component {
state = {
'players': this.props.players // default state
}
sortRosterStateBy = (field, players) => {
// Sorting ...
var sortedPlayers = players.sort( (a, b) => {
if (a[field] > b[field]) {
return 1;
}
if (a[field] < b[field]) {
return -1;
}
return 0;
});
// Then call setState
this.setState({'players': sortedPlayers});
}
render() {
// Prefix some interestings stats before roster
var ages = [], heights = [];
this.props.players.forEach(function(player) {
if (player.year > 2000) {
ages.push(player.Age);
heights.push(player.Meters);
}
});
var avgAge = (ages.reduce( (a, b) => a + b) / 12).toPrecision(3);
var avgHeight = (heights.reduce( (a, b) => a + b) / 12).toPrecision(3);
// Return page with stats data and Roster
return (
<div>
<h1>2012 Olympic Men's Basketball Team</h1>
<h2>Average Age: {avgAge} years old</h2>
<h2>Average Height: 6 ft 7 in ({avgHeight} m)</h2>
<Sort players={this.props.players} sortRosterStateBy={this.sortRosterStateBy}/>
<Roster players={this.state.players}/>
</div>
);
}
};
ReactDOM.render(
<SortablePlayerTable players={PLAYERS} />,
document.getElementById('container')
);
附加的功能,每一个<div/>
在<Sort/>
它调用父功能上的点击this.props.sortBy()
class Sort extends React.Component {
sort(field){
this.props.sortBy(field);
}
render() {
return (
<div className="sort-section">
<h1>Sort by</h1>
<div className="pill" id='age' onClick=this.sort.bind(this,'age')>Age</div>
<div className="pill" id='Meters' onClick=this.sort.bind(this,'height')>Height</div>
<div className="pill" id='Name' onClick=this.sort.bind(this,'name')>Name</div>
</div>
)
}
}
通过这个父功能sortBy
为props
您的<SortablePlayerTable/>
组件。
class SortablePlayerTable extends React.Component {
state = {
players: [] // default state
}
sortBy(field){
// Your sorting algorithm here
// it should push the sorted value by field in array called sortedPlayers
// Then call setState
this.setState({
players: sortedPlayers
});
}
render() {
// calculate stats
return (
<div>
{/* some JSX */}
<Sort sortBy={sortBy}/>
<Roster
players={this.state.players}
/>
</div>
);
}
};
现在,排序后的数组将对您的<Roster/>
组件可用this.props.players
。直接渲染数组,而无需在<Roster/>
组件内部应用任何排序。
问题内容: 我最欣赏Backbone.js的一件事是简单而优雅的继承是如何工作的。我开始着手处理React,并且在React中无法真正找到类似于此Backbone代码的任何内容 在react中,我们有mixin,如果使用mixin,我们可以像上面的例子那样有点接近 与一遍又一遍地定义相同的东西相比,这没有那么重复,但是它似乎不像Backbone那样灵活。例如,如果我尝试重新定义/覆盖存在于我的一个
本文向大家介绍堆排序实例(Java数组实现),包括了堆排序实例(Java数组实现)的使用技巧和注意事项,需要的朋友参考一下 堆排序:利用大根堆 数组全部入堆,再出堆从后向前插入回数组中,数组就从小到大有序了。 堆排序:对数组进行构造堆(最大堆) 以上这篇堆排序实例(Java数组实现)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
问题内容: 我是React.js的新手,因此非常感谢您的帮助。 我有这个:http : //jsfiddle.net/rzjyhf91/ 其中我做了两部分:图像和按钮。 目的是通过单击按钮来删除图像,我为此使用了它,但是它不起作用: 如何从另一个组件中删除反应组件? 问题答案: 好吧,看来您应该重新考虑显示控件的处理方式。React只是关于孤立的组件,因此,您不应该卸载由父组件安装的组件。相反,您
本文向大家介绍React.js中的高阶组件,包括了React.js中的高阶组件的使用技巧和注意事项,需要的朋友参考一下 高阶部分简称为hoc。这是一种接收组件并返回具有附加功能的新组件的模式。 // hoc是自定义JavaScript函数的名称 我们使用带有状态和/或道具的组件来构建UI。hoc用类似的方法从提供的组件中构建一个新组件。 使用hoc在React中成为一个横切关注点。这些组件将负责单
本文向大家介绍php选择排序法实现数组排序实例分析,包括了php选择排序法实现数组排序实例分析的使用技巧和注意事项,需要的朋友参考一下 本文实例分析了php选择排序法实现数组排序的方法。分享给大家供大家参考。具体分析如下: 选择排序法的基本思路:直接用案例来说明吧,比如有一个数组$arr = array(2,6,3,9),从大到小排序。 第一次大循环:它首先假设$arr[0]为最大值,然后分别跟$
本文向大家介绍Android实现网易Tab分类排序控件实现,包括了Android实现网易Tab分类排序控件实现的使用技巧和注意事项,需要的朋友参考一下 先看看效果图: 1、XML布局引入 2、设置数据源数据,也就是每个item的对应文本数据 3、设置监听,用于交互点击和长按的事件 4、开始排序和结束排序的接口 未完善的自定义功能 1、现在仅仅是支持String,并且布局也无法自定义,后续可能会完善