javascript - 如何在单击时使用传入的道具渲染 React 组件
问题描述
我正在使用 React 和 Redux 制作菜单,但当前在用户选择类别时呈现项目时遇到问题。
我的目标是在单击特定类别时呈现嵌套在特定类别的 redux 状态中的项目列表。
在 Categories.js 中,它从 redux 存储中加载类别并显示它们。
import React, { Component } from "react";
import { connect } from "react-redux";
import CategoryItems from "./CategoryItems"
import {
Card,
CardTitle,
CardImg,
Container,
Row,
Col,
CardBody,
Button
} from "shards-react";
class Categories extends Component {
handleClick = category => {
alert(category.title);
return (
<CategoryItems
category={category}
/>
);
};
render() {
let categoryList = this.props.categories.map(category => {
return (
<div key={category.id}>
<Col>
<Card
key={category.id}
onClick={() => {
this.handleClick(category);
}}
>
<CardBody>
<CardTitle>{category.title}</CardTitle>
</CardBody>
</Card>
</Col>
</div>
);
});
return (
<Container>
<Row>{categoryList}</Row>
</Container>
);
}
}
const mapStateToProps = state => {
return {
categories: state.categories,
};
};
export default connect(mapStateToProps)(Categories);
当单击一个类别时,(警报只是为了确保数据生成)我将其设置为呈现嵌套在所选类别中的项目数组。
import React, { Component } from 'react'
import {
Card,
CardTitle,
CardImg,
Container,
Row,
Col,
CardBody,
Button
} from "shards-react";
export class CategoryItems extends Component {
render() {
let items = this.props.category.items;
let categoryItems = items.map(item => {
return (
<Col className="">
<Card
className="mt-2 mb-2 item-col"
style={{ maxWidth: "500px" }}
key={item.id}
>
<CardBody>
<CardTitle style={{ position: "absolute", top: 20, right: 20 }}>
{item.title}
</CardTitle>
<CardImg
style={{ maxWidth: "200px" }}
src={item.img}
alt={item.title}
/>
<span
style={{ position: "absolute", bottom: 40, right: 100 }}
to="/"
// onClick={() => {
// this.handleClick(item.id);
// }}
>
<Button pill theme="info">
+
</Button>
</span>
<div style={{ position: "absolute", bottom: 40, right: 20 }}>
${item.price}
</div>
</CardBody>
</Card>
</Col>
);
});
return (
<Container className="menu-item-cont">
<Row>{categoryItems}</Row>
</Container>
);
}
}
export default CategoryItems
这部分不渲染项目,我没有收到错误消息。
我还尝试将我想要直接渲染的项目放入状态中,以查看是否可以让它们在单击时渲染,类似于 Categories.js 没有运气的情况。
我对反应有些陌生,所以如果这是一个初学者问题,请原谅我。
感谢任何帮助,因为我花了几个小时试图解决这个问题。
解决方案
问题是您没有渲染从handleClick
. 您需要的是 JSX 中的条件渲染,然后根据状态中的受控标志变量确定是否渲染元素。
class Categories extends Component {
constructor() {
this.state = {
show: false,
category: undefined
}
this.toggle = (category) => {
this.setState({ show: !this.state.show, category })
}
}
render() {
let categoryList = this.props.categories.map(category => {
return (
<div key={category.id}>
<Col>
<Card
key={category.id}
onClick={e => this.toggle(category)}
>
<CardBody>
<CardTitle>{category.title}</CardTitle>
</CardBody>
</Card>
</Col>
</div>
);
});
return ([
<Container>
<Row>{categoryList}</Row>
</Container>,
(
this.state.show
? <CategoryItems category={this.state.category}/>
: null
)
]);
}
}
推荐阅读
- ruby-on-rails - ActionMailer::Base.deliveries.last 不进入 sidekiq 队列
- c++ - 使用 GDI+ 和 Qt Pixmap C++ 时的内存泄漏问题
- node.js - VS Code 调试器没有开始
- c - 为什么这段代码不起作用(发送列表作为参数)?
- c - 对具有多个元素的链表进行排序
- python - 如何修复渲染 SLS 失败:Jinja 语法错误:预期令牌',',得到':'?
- powershell - YAML Powershell 更新文件权限失败
- javascript - 我甜蜜的 alert2 按钮都在提交删除表单
- vue.js - 匹配计算值
- c++ - 如何打开文本文件并将所有值分配给 c++ 中的不同向量