- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经搜索了近 3 天这个问题,但没有找到任何解决它的方法。
我在 React 中有一个简单的组件,它显示从后端 PHP 脚本检索的有关浏览器中建筑物的信息。
当我直接从浏览器访问该地址时,似乎输出如下:
{
"project": {
"project": "Acero",
"address": "CALLE ACERO #65 COL. FELIPE PESCADOR DELEGACION CUAUHTÉMOC C.P. 06280 CDMX",
"features": "Únicamente 10 departamentos,Desde 53.89m² hasta 111.92m²,2 Recámaras,1 ó 2 Baños,Patio de Servicio,Roof Garden Privado,Terraza o Balcón",
"price": 1558920,
"status": "preventa",
"priority": 2
},
"id": 0,
"images": {
"0": "Galeria-Acero-01.jpg",
"1": "Galeria-Acero-02.jpg",
"2": "Galeria-Acero-03.jpg",
"3": "Galeria-Acero-04.jpg",
"4": "Galeria-Acero-05.jpg",
"5": "Galeria-Acero-06.jpg",
"6": "Galeria-Acero-07.jpg",
"desarrollos": "Galeria-Acero-Desarrollos.jpg",
"h": "Galeria-Acero-H.jpg",
"home": "Galeria-Acero-Home.jpg"
},
"path": "http://api.habitareinmobiliaria.com.mx/desarrollos/Acero/"
}
但是当它在React中渲染时,它显示如下:
它在控制台元素中正确显示,但在应用程序的其余部分中不正确显示。为什么会发生这种情况以及如何解决它?
我的组件代码:
import React,{Component} from 'react'
import Footer from '../Footer/Footer'
import Header from '../Header'
import SubNav from '../SubNav'
import Details from './Details'
import {Configurations} from '../AppConfig'
class Project extends Component{
constructor(props) {
super(props);
this.state = {
projectID : props.match.params.id,
projectName: "",
topProjectInfo: [],
images: []
};
}
componentWillMount(){
fetch(Configurations.API.projectInfo(this.state.projectID))
.then((result)=>{return result.json() })
.then((project)=>{
if(project === "error"){
alert("Error")
}else{
console.log(project)
var Images = Object.values(project.images);
console.log(Images)
//Manipulate those images into JSX
let ImageGallery = Images.map((img)=>{
return (
<div key={Math.random()}className="horizontal_item">
<div className="zoomimage">
<img src={project.path+img} className="intense" alt="" />
<i className="fa fa-expand" />
</div>
<img src={project.path+img} alt="" />
<div className="show-info">
<span>Info</span>
<div className="tooltip-info">
<h5>Imagen de muestra</h5>
<p>
Desarrollo {project.project.project}
</p>
</div>
</div>
</div>
)
})
let TopInfo = (
<div className="fixed-info-container">
<h3>{project.project.project}</h3>
<div className="separator" />
<div className="clearfix" />
<p>
{project.project.address}
</p>
<h4>Características</h4>
<Details features={project.project.features} />
<a
href="/"
className=" btn anim-button trans-btn transition fl-l"
target="_blank"
>
<span>Ver en mapa</span>
<i className="fa fa-eye" />
</a>
</div>
)
this.setState({
projectName: project.project.project,
images: ImageGallery,
topProjectInfo: TopInfo
},function(){
window.loadingAlert(500)
window.initDogma()
})
}
})
}
componentDidMount(){
// setTimeout(function(){
// window.history.replaceState(undefined, undefined, "#"+3)
// },150)
}
render(){
return(
<div >
<Header />
<SubNav />
<div className="content full-height no-padding">
{this.state.topProjectInfo}
{/* fixed-info-container end*/}
{/* resize-carousel-holder*/}
<div className="resize-carousel-holder vis-info gallery-horizontal-holder">
{/* gallery_horizontal*/}
<div
id="gallery_horizontal"
className="gallery_horizontal owl_carousel"
>
{this.state.images}
</div>
{/* resize-carousel-holder*/}
{/* navigation */}
<div className="customNavigation">
<a href="/" className="prev-slide transition">
<i className="fa fa-angle-left" />
</a>
<a href="/" className="next-slide transition">
<i className="fa fa-angle-right" />
</a>
</div>
{/* navigation end*/}
</div>
{/* gallery_horizontal end*/}
</div>
<Footer />
</div>
);
}
}
export default Project
import React, {Component} from 'react'
class Details extends Component{
constructor(props){
super(props)
this.state = {
details: []
}
}
componentWillMount(){
const {features} = this.props
let exploded = features.split(',')
let JSX = exploded.map((f,index)=>{
return <li key={index}>{f}</li>
})
this.setState({
details: JSX
})
}
render(){
return(
<ul className="project-details">
{
this.state.details
}
</ul>
)
}
}
export default Details
最佳答案
字体可能是这里的罪魁祸首。
关于javascript - 从 API 检索到的重音字符在 ReactJS 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55695295/
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求提供代码的问题必须表现出对所解决问题的最低限度理解。包括尝试过的解决方案、为什么它们不起作用,以及预
为什么在 C# 中添加两个 char 结果是 int 类型? 例如,当我这样做时: var pr = 'R' + 'G' + 'B' + 'Y' + 'P'; pr 变量变为 int 类型。我希望它是
下面的代码可以编译,但 char 类型的行为与 int 类型的行为不同。 特别是 cout ::ikIsX >() ::ikIsX >() ::ikIsX >() using names
我正在寻找一个正则表达式,它可以匹配长度为 1 个或多个字符但不匹配 500 的内容。这将在 Rails 路由文件中使用,特别是用于处理异常。 路线.rb match '/500', to: 'err
对于 C 编程作业,我正在尝试编写几个头文件来检查所谓的“X 编程语言”的语法。我最近才开始,正在编写第一个头文件。这是我编写的代码: #ifndef _DeclarationsChecker_h_
为什么扩展的 ascii 字符(â、é 等)被替换为 字符? 我附上了一张图片...但我正在使用 PHP 从 MySQL 中提取数据,其中一些位置有扩展字符...我使用的是 Arial 字体。 您可以
我有一个与 R 中的断线相关的简单问题。 我正在尝试粘贴,但在获取(字符/数字)之间的断线时遇到问题。请注意,这些值包含在向量中(V1=81,V2=55,V3=25)我已经尝试过这段代码: cat(p
如何将 ANSI 字符 (char) 转换为 Unicode 字符 (wchar_t),反之亦然? 是否有用于此目的的任何跨平台源代码? 最佳答案 是的,在 中你有mbstowcs()和 wcsto
函数 fromCharCode 不适用于国际 ANSI 字符。例如,对于 ID 为 192 到 223 的俄语 ANSI (cp-1251) 字符,它返回特殊字符。如何解决这个问题? 我认为,需要将A
如果不喜欢,我想隐藏 id,但不起作用 SELECT * FROM character, character_actor WHERE character.id NOT LIKE character_a
现在这个程序成功地反转了键盘输入的单词。但是我想在我反转它之前“保存”指针中的单词,所以我可以比较两者,反转的和“原始的”,并检查它们是否是回文。我还没有太多经验,可能会出现比我知道的更多的错误,但我
Memcpy 和 memcmp 函数可以接受指针变量吗? char *p; char* q; memcpy(p,q,10); //will this work? memcmp(p,q,10); //w
恐怕我对一个相当过饱和的主题的细节有疑问,我搜索了很多,但找不到一个明确的答案来解决这个特定的明显-imho-重要的问题: 使用UTF-8将byte[]转换为String时,每个字节(8bit)都变成
我有一个奇怪的问题。我需要从 stat 命令打印输出字符串。 我已经编写了获取一些信息的代码。 import glob import os for file in glob.glob('system1
我正在使用 Java 并具有其值如下所示的字符串, String data = "vale-cx"; data = data.replaceAll("\\-", "\\-\\"); 我正在替换其中的“
String urlParameters = "login=test&password=te&ff"; 我有一个String urlParams,& - 是密码的一部分,如何使其转义,从而不被识别为分
大家好,我只想从此字符串中提取第一个字母: String str = "使 徒 行 傳 16:31 ERV-ZH"; 我只想获取这些字符: 使 徒 行 傳 并且不包括 ERV-ZH 仅数
这个问题已经有答案了: Crash or "segmentation fault" when data is copied/scanned/read to an uninitialized point
所以, 我有一个字符**;它本质上是一个句子,带有指向该句子中每个单词的指针;即 'h''i''\0''w''o''r''l''d''\0''y''a''y''!''\0' 在这种情况下,我希望使用可
这个问题在这里已经有了答案: Using quotation marks inside quotation marks (12 个答案) 关闭 7 年前。 如何打印 " 字符? 我知道打印 % 符号
我是一名优秀的程序员,十分优秀!