reactjs - 离子幻灯片反应内容都在一条线上
问题描述
我正在尝试使用多张幻灯片创建视图。但是,同一张幻灯片上的组件仅在一行上呈现,而不是按钮上方的标题。有人可以帮我解决这个问题吗?我的幻灯片代码是:
const ExploreContainer: React.FC<ContainerProps> = ({ name }) => {
return (
<IonContent>
<IonSlides pager={true} options={slideOpts}>
<IonSlide>
<IonTitle size="large"> Slide 1 Title</IonTitle>
<IonButton color="primary">Get Started</IonButton>
</IonSlide>
<IonSlide>
<h1>Slide 2</h1>
</IonSlide>
<IonSlide>
<h1>Slide 3</h1>
</IonSlide>
</IonSlides>
</IonContent>
);
};
我得到的显示是:
解决方案
离子成分必须包裹在一个<div>
正确的幻灯片语法应为:
<IonSlide>
<div><IonTitle size="large"> Slide 1 Title</IonTitle></div>
<IonButton color="primary">Get Started</IonButton>
</IonSlide>
推荐阅读
- c# - 在 EF6 中更新实体子集合
- node.js - OpenStack MERN 应用程序正在抛出 net::ERR_CONNECTION_REFUSED
- c++ - 未在此范围内声明函数错误
- c++ - 如何强制ROS以单线程模式运行
- node.js - 如果失败X次,nodejs重试功能
- parsing - 如何找出 ANTLR 语法无法解析输入,日志文件中的特殊时间戳
- php - 修剪单词但如果找到则在 html 元素的末尾停止
- excel-formula - 是否有一个 Excel 公式可以搜索单元格以进行某些测试并在其右侧返回搜索到的字母和 11 个数字?
- excel - 复制粘贴 - 相同的工作表和流程,但适用于整个电子表格
- mysql - MySQL - 多行 1 id & 将多列数据转换为逗号分隔的行