今天,当我通过手机访问位于同一网络(wifi)上的本地主机时,我发现了一件奇怪的事情。
问题是页面未在手机上呈现,页面显示空白,而在我的计算机上工作正常。
代码如下:
import React, {Component} from 'react';
import './assets/css/bootstrap.min.css';
// import './assets/js/bootstrap.min';
import { Timeline, Tweet} from 'react-twitter-widgets'
import config from './config';
class App extends Component {
constructor(props) {
super(props);
this.state = {
mainImage: {
url: null,
caption: null
},
uuid: null,
title: null,
author: {
name: null,
email: null,
image: null
},
tags: [],
premium: null,
preamble: null,
body: [],
publishingTime: null
};
}
componentDidMount() {
this.fetchArticle();
}
fetchArticle() {
fetch(config.apiUrl + "article/f3028496-d1e6-42cb-b39a-8e9593d5a05a")
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
mainImage: data.mainImage,
uuid: data.uuid,
title: data.title,
author: data.author,
tags: data.tags,
premium: data.premium,
preamble: data.preamble,
body: data.body,
publishingTime: data.publishingTime,
});
})
.catch(error => {
console.log(error);
});
};
conditionalRendering(block, key) {
let blockType = Object.keys(block)[0].toLowerCase() || null;
if (blockType != null) {
if (blockType === 'paragraph') {
return this.renderParagraph(block, key);
} else if (blockType === 'headline') {
return this.renderHeadline(block, key);
} else if (blockType === 'image') {
return this.renderImage(block, key);
}
} else {
console.log("Block type null")
}
}
renderParagraph(block, key) {
return (
<p key={key}>{block.paragraph}</p>
);
}
renderHeadline(block, key) {
return (
<h4 key={key}>{block.headline}</h4>
);
}
renderImage(block, key) {
return (
<div key={key}>
<img width="100%" src={block.image.url} alt=""/>
<p><i>{block.image.caption}</i></p>
</div>
);
}
renderTwitterEmbeds(twitterId) {
return (
<Tweet
tweetId={twitterId}
/>
);
}
render() {
return (
<div className="App">
<div className={"container-fluid article"}>
<div className={"row header header"}>
<img width="100%" height={"260px"}
src={this.state.mainImage.url}
alt=""/>
{/*<p><i>{this.state.mainImage.caption}</i></p>*/}
</div>
<div className={"row"}>
<div className={"col-sm-12 content text-left mt-2"}>
<h4>{this.state.title}</h4>
<p>{this.state.author.name} | {this.state.publishingTime}</p>
<p className={"preamble mt-3"}>{this.state.preamble}</p>
{
this.state.body.map((block, key) => {
return this.conditionalRendering(block, key)
})
}
</div>
</div>
<div className={"row"}>
<div className={"col-sm-12 content text-left mt-2"}>
{
this.renderTwitterEmbeds("1099398639942856705")
}
</div>
</div>
</div>
</div>
);
}
}
export default App;
您认为这里的问题是无法从手机上渲染我的Web应用程序?