这是我在官方文档上看到的,功能是实现(具体是什么,请往下看)

以下是json数据:

 [
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

显示红色的物品,是没有库存的(stocked:false),如$29.99的basketball和$399.99的iphone5。

在我看来react的结构就像‘包饺子’,一层夹着一层,可以看一下上图的几个边框,不同颜色代表着不同区域划分。

1.(orange): contains the entirety of the example 外边的黄色区域,包含整个例子。

2.(blue): receives all user input  里面一层的蓝色框框,度用户的输入进行serach。

3.(green): displays and filters the data collection based onuser input   绿色框展示用户筛选的物品信息。

4. (turquoise): displays a heading for each category  显示产品种类,这里是sproting goods和electronics。

5.(red): displays a row for each product  红色框,每件物品。

 //这是结构的最外一层  它里面包含searchBar和producTable两个组件
var FilterableProductTable = React.createClass({
render: function() {
return (
<div>
<SearchBar />
<ProductTable products={this.props.products} />
</div>
);
}
}); var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
];
//这里的prop属性定义了product 引用字上面的json数据
ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
); //这是最简单的搜索框组件
var SearchBar = React.createClass({
render: function() {
return (
<form>
<input type="text" placeholder="Search..." />
<p>
<input type="checkbox" />
{' '}
Only show products in stock
</p>
</form>
);
}
}); //关键的来了 这个productTable里面还包含了一些组件
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
//遍历json数据
this.props.products.forEach(function(product) {
if (product.category !== lastCategory) { //注意这里的判断,并不是每回都要把类别加一次
//这里有一个产品种类的组件
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
//还有一个产品行的组件
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
});
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}); //category在上面可以找到
var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
}); var ProductRow = React.createClass({
render: function() {
//如果没有货存 红色字体显示
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
});

就这样玩了吗?还没有,以上还没实现搜索和过滤功能。

 var ProductCategoryRow = React.createClass({
render: function() {
return (<tr><th colSpan="2">{this.props.category}</th></tr>);
}
}); var ProductRow = React.createClass({
render: function() {
var name = this.props.product.stocked ?
this.props.product.name :
<span style={{color: 'red'}}>
{this.props.product.name}
</span>;
return (
<tr>
<td>{name}</td>
<td>{this.props.product.price}</td>
</tr>
);
}
}); //这里都没变 //注意这里有改动
var ProductTable = React.createClass({
render: function() {
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product) {
//用于过滤产品(用户输入的关键字和库存)
if (product.name.indexOf(this.props.filterText) === -1 || (!product.stocked && this.props.inStockOnly)) { //注意此处的逻辑
return;
}
if (product.category !== lastCategory) {
rows.push(<ProductCategoryRow category={product.category} key={product.category} />);
}
rows.push(<ProductRow product={product} key={product.name} />);
lastCategory = product.category;
}.bind(this)); //由于函数里面用到了this 这里bind一下
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}); //serachBar现在膨胀了 这么多
var SearchBar = React.createClass({
handleChange: function() {
//上面肯定有个函数 肯定在父组件上
this.props.onUserInput(
this.refs.filterTextInput.value,
this.refs.inStockOnlyInput.checked //注意这里的ref用法
);
},
render: function() {
return (
<form>
<input
type="text"
placeholder="Search..."
value={this.props.filterText}
ref="filterTextInput"
onChange={this.handleChange} //文本改变回调事件 它的作用是什么? 下面有答案
/>
<p>
<input
type="checkbox"
checked={this.props.inStockOnly}
ref="inStockOnlyInput"
onChange={this.handleChange} //checkbox的判断
/>
{' '}
Only show products in stock
</p>
</form>
);
}
}); //关键的来了 这个里面就是饺子皮
var FilterableProductTable = React.createClass({
getInitialState: function() {
return {
filterText: '',
inStockOnly: false
};
}, //这里初始化的state 文本为空 默认checkbox=false handleUserInput: function(filterText, inStockOnly) {
this.setState({
filterText: filterText,
inStockOnly: inStockOnly
});
}, render: function() {
return (
<div>
<SearchBar
//prop定义的的位置 可以对照着看
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
onUserInput={this.handleUserInput} //这个函数用于改变初始state
/>
//prop定义的位置 要注意这里的ProductTable里面的filterText和instockOnly 是随着serachBar的输入变动的
<ProductTable
products={this.props.products}
filterText={this.state.filterText}
inStockOnly={this.state.inStockOnly}
/>
</div>
);
}
}); var PRODUCTS = [
{category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'},
{category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'},
{category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'},
{category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'},
{category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'},
{category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'}
]; ReactDOM.render(
<FilterableProductTable products={PRODUCTS} />,
document.getElementById('container')
);

好了,代码量并不大,但是这里面的逻辑和每层之间的关系确实有点搞人呀。。。希望大家看懂了react想表达的是什么