回顾react已经忘掉的差不多了~ 时隔已久已经想不起来内部的业务逻辑和该如何编写代码了,于是又重刷了一下React官方文档~
重头看到尾之后一点点回顾react中的一些小小的知识点,以及使用内部关联使用的CodePen照着敲react中的核心概念和使用。
react核心概念 第12小节----React 哲学 简介是这么说的 :
React最棒的部分之一是引导我们思考如何构建一个应用。在这篇文档中,我们将会通过 React 构建一个可搜索的产品数据表格来更深刻地领会 React哲学。
所以照着理解并在CodePen敲了一下以便于理解和使用!
设计初稿是这样的
完成后
下面展示所有代码
js
//最外层盒子组件
class FilterableProductTable extends React.Component {
constructor(props) {
super(props);
this.state = {
text: "",
checked: false
};
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleInStockChange = this.handleInStockChange.bind(this);
}
handleFilterTextChange(text) {
this.setState({
text: text
});
}
handleInStockChange(checked) {
console.log(checked);
this.setState({
checked: checked
});
}
render() {
return (
<div>
<SearchBar
text={this.state.text}
checkeds={this.state.checked}
onFilterTextChange={this.handleFilterTextChange}
onInStockChange={this.handleInStockChange}
/>
<ProductTable
getList={this.props.getList}
Text={this.state.text}
checkeds={this.state.checked}
/>
</div>
);
}
}
//头部search组件
class SearchBar extends React.Component {
constructor(props) {
super(props);
this.handleFilterTextChange = this.handleFilterTextChange.bind(this);
this.handleInStockChange = this.handleInStockChange.bind(this);
}
handleFilterTextChange(e) {
this.props.onFilterTextChange(e.target.value);
}
handleInStockChange(e) {
console.log(e.target.checked);
this.props.onInStockChange(e.target.checked);
}
render() {
const Texts = this.props.text;
const Checkeds = this.props.checkeds;
return (
<form className="Search">
<input
className="text"
type="text"
placeholder="请输入您要查询的名称..."
value={Texts}
onChange={this.handleFilterTextChange}
/>
<p>
<input
type="checkbox"
checked={Checkeds}
onChange={this.handleInStockChange}
/>
{"只展示有库存产品"}
</p>
</form>
);
}
}
// 产品列表table组件
class ProductTable extends React.Component {
render() {
const Texts = this.props.Text;
const Checkeds = this.props.checkeds;
const rows = [];
let lastCategory = null;
this.props.getList.forEach((getList) => {
if (getList.name.indexOf(Texts) === -1) {
return;
}
if (Checkeds && !getList.stocked) {
return;
}
if (getList.category !== lastCategory) {
rows.push(
<ProductCategoryRow
category={getList.category}
key={getList.category}
/>
);
}
rows.push(<ProductRow getList={getList} key={getList.name} />);
lastCategory = getList.category;
});
return (
<table>
<thead>
<tr>
<th>{"名称"}</th>
<th>{"价格"}</th>
<th>{"库存"}</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
);
}
}
// 列表产品类别栏组件
class ProductCategoryRow extends React.Component {
render() {
const category = this.props.category;
return (
<tr className="cate">
<th colSpan="3" className="cate">
{category}
</th>
</tr>
);
}
}
// 列表中的每一行的产品内容<tr>组件
class ProductRow extends React.Component {
render() {
const getList = this.props.getList;
const name = getList.stocked ? (
getList.name
) : (
<span style={{ color: "#fb7373" }}>{getList.name}</span>
);
return (
<tr>
<td>{name}</td>
<td>
{getList.stocked ? (
getList.price
) : (
<span style={{ color: "#fb7373" }}>{getList.price}</span>
)}
</td>
<td>
{getList.stocked ? (
"有"
) : (
<span style={{ color: "#fb7373" }}>{"无"}</span>
)}
</td>
</tr>
);
}
}
// 数据json
const GetList = [
{
category: "体育用品",
price: "$ 49 元",
stocked: true,
name: "足球"
},
{
category: "体育用品",
price: "$ 55 元",
stocked: true,
name: "篮球"
},
{
category: "体育用品",
price: "$ 29 元",
stocked: false,
name: "排球"
},
{
category: "体育用品",
price: "$ 29 元",
stocked: true,
name: "乒乓球"
},
{
category: "体育用品",
price: "$ 9 元",
stocked: false,
name: "羽毛球"
},
{
category: "电子产品",
price: "$ 899 元",
stocked: false,
name: "手机"
},
{
category: "电子产品",
price: "$ 99 元",
stocked: true,
name: "iPod平板"
},
{
category: "电子产品",
price: "$ 4899 元",
stocked: true,
name: "电脑"
},
{
category: "电子产品",
price: "$ 3899 元",
stocked: true,
name: "iPhone 13"
},
{
category: "电子产品",
price: "$ 4799 元",
stocked: false,
name: "华为电脑"
}
];
// 渲染最外层组件<FilterableProductTable getList={GetList} />并传递json参数到Id为container的dom中
ReactDOM.render(
<FilterableProductTable getList={GetList} />,
document.getElementById("container")
);
一定不要忘了在HTML中添加这个ID为 container的div哦! (那是它要render渲染的地方)
好啦~ 这只是了解了一点点React的基础,Vue转React原来是这样的,还是要多多学习呀,学无止境…