问题：
如何用数据制作嵌套组件？（React JS）
许博易
我是新手，我有一个很基本的问题。我需要知道如何制作嵌套组件。
我有一个显示菜肴列表的组件“MenuComponent”和一个显示所选菜肴描述的函数。我只需要把所选菜的功能放在一个单独的组件中。
我的代码如下
应用程序JS
import Menu from './components/MenuComponent';
// data of dishes comes from "shared/dishes" and it will be listed bellow in dishes.js
import { DISHES } from './shared/dishes';
export default class App extends Component{
constructor(props) {
super(props);
this.state = {
dishes: DISHES
};
}
render (){
return (
<div className="App">
<Navbar dark color="primary">
<div className="container">
<NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
</div>
</Navbar>
<Menu dishes={this.state.dishes} />
</div>
);
}
}
MenuComponent.js
export default class Menu extends Component {
constructor(props) {
super(props);
this.state = {
selectedDish: null
}
}
onDishSelect(dish) {
this.setState({ selectedDish: dish});
}
renderDish(dish) {
if (dish != null)
return(
<Card>
<CardImg top src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
);
else
return(
<div></div>
);
}
render() {
const menu = this.props.dishes.map((dish) => {
return (
<div className="col-12 col-md-5 m-1">
<Card key={dish.id}
onClick={() => this.onDishSelect(dish)}>
<CardImg width="100%" src={dish.image} alt={dish.name} />
<CardImgOverlay>
<CardTitle>{dish.name}</CardTitle>
</CardImgOverlay>
</Card>
</div>
);
});
return (
<div className="container">
<div className="row">
{menu}
</div>
// I need to separate selectedDish into an independant component
<div className="row">
<div className="col-12 col-md-5 m-1">
{this.renderDish(this.state.selectedDish)}
</div>
</div>
</div>
);
}
}
dishes.js
export const DISHES =
[
{
id: 0,
name:'Uthappizza',
image: 'assets/images/uthappizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
] },
{
id: 1,
name:'Zucchipakoda',
image: 'assets/images/zucchipakoda.png',
category: 'appetizer',
label:'',
price:'1.99',
description:'Deep fried Zucchini coated with mildly spiced Chickpea flour batter accompanied with a sweet-tangy tamarind sauce',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
id: 2,
name:'Vadonut',
image: 'assets/images/vadonut.png',
category: 'appetizer',
label:'New',
price:'1.99',
description:'A quintessential ConFusion experience, is it a vada or is it a donut?',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
},
{
id: 3,
name:'ElaiCheese Cake',
image: 'assets/images/elaicheesecake.png',
category: 'dessert',
label:'',
price:'2.99',
description:'A delectable, semi-sweet New York Style Cheese Cake, with Graham cracker crust and spiced with Indian cardamoms',
comments: [
{
id: 0,
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
id: 1,
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
id: 2,
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
id: 3,
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
id: 4,
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
}
];
我很困惑，我需要把选定的菜分成一个单独的成分。我怎么能那么做。
共有1个答案
从光启
您可以在名为renderdish.js的文件中使用renderdish
const RenderDish = ({ dish }) => {
return dish ? (
<Card>
<CardImg top src={dish.image} alt={dish.name} />
<CardBody>
<CardTitle>{dish.name}</CardTitle>
<CardText>{dish.description}</CardText>
</CardBody>
</Card>
) : null;
};
export default RenderDish;
并在MenuComponent.js中导入renderdish component。只有当dish存在时才呈现它。
import RenderDish from './renderDish.js'
...
export default class Menu extends Component {
...
return (
<div className="container">
<div className="row">{menu}</div>
<div className="row">
<div className="col-12 col-md-5 m-1">
{selectedDish && <RenderDish dish={selectedDish} />}
</div>
</div>
</div>
);
}
}
类似资料：
-
嗨，我是ReactJS平台的学生开发者。我以前在render方法中使用过类组件，但现在我学习了钩子和函数组件对它的重要性，就像每个Reactjs开发人员所知道的那样。我在使用嵌套组件时遇到问题，我面临如下错误： index.js：1警告：函数作为React子函数无效。如果返回组件而不是从渲染返回组件，可能会发生这种情况。或者你想调用这个函数而不是返回它 你能帮我解决这个问题吗？如何在返回部分有效地
-
我正在使用asp构建一个web api。netwebapi 2，对于我的文档，我选择了swagger。 我遇到的问题是我的一个api方法采用嵌套数组（另一个数组中的字符串数组）。在postman中手动测试时，当我键入以下内容时效果很好： 但是在swagger-ui中，我只输入一个字段，每行只有一个参数。这使得我不能为每个嵌套数组输入两个值。 结果应如下所示 （json）： 这是我通过上面的查询参数
-
问题内容： 假设地，我有5个字符串数组对象： 我希望另一个数组对象包含这5个字符串数组对象。我该怎么做？我可以把它放在另一个数组中吗？ 问题答案： 像这样： 要么 （后一种语法可以用于变量声明之外的赋值中，而较短的语法仅适用于声明。）
-
< code>[[{header=C，value=dsd}，{header=D，value=test}，{header=E，value=e}，{header=F，value=hhh}，{header=G，value=ghgh}]] 上面是JsonLists数组的数组，我需要将外部数组扁平化为JsonLists的内部数组。 我最终也只会从JsonList中获取值，并将这些值放入它自己的单独数组中：
-
人们通常如何在React应用程序中拥有“全局”数据？ 例如，假设一个用户登录到我的应用程序后，我有以下数据。 但这对我来说似乎很困难，因为这意味着我必须通过每个组合传递数据，只是为了将其传递给需要它的孩子。 是否有一种React方法来管理这种类型的数据？ 注意：这个示例非常简化--我喜欢将意图包装成复合，这样整个UI特性的实现细节就可以在我认为合适的时候进行彻底的更改。 编辑：我知道默认情况下，在
-
问题内容： 我有一个从数据库（JSON MySQL中的数据存储）检索数据的程序。 我设法得到对象。输出为： JSON对象： 我需要有关如何处理数据并将信息放入不同数组/对象的建议。例如 谢谢。 问题答案： 您可以使用Jackson Api来实现。 您必须创建与json对象相同的Pojo类（该类应具有“ attributes”，“ uuid”之类的成员）。 这是您必须使用的类 和代码 现在，您可以使