时间戳

首页 > 解决方案 > React CSS 不会显示在移动设备（Chrome、Safari、Firefox）上，但会显示在桌面站点上

css - React CSS 不会显示在移动设备（Chrome、Safari、Firefox）上，但会显示在桌面站点上

问题描述

我是 ReactJS 的新手，感谢您提供的任何建议

有人可以告诉我这可能的原因吗？我在控制台中没有错误

在此处输入图像描述

app/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap" rel="stylesheet">
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-X"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-XXXXXXXXX-X');
    </script>
    <title>App | REACT App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

app/scr/App.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Layout from './components/Layout/Layout'
import Footer from './components/Footer/Footer';
import Home from './components/Pages/Home';
import BlogIndex from './containers/BlogBuilder/BlogIndexBuilder';
import BlogShow from './containers/BlogBuilder/BlogShowBuilder';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Layout>
            <Switch>
              <Route exact path="/blogs" component={BlogIndex} />
              <Route path="/blogs/:id" component={BlogShow} />
              <Route path="/" component={Home} />
            </Switch>
            <Footer />
          </Layout>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

app/src/containers/BlogBuilder/BlogIndexBuilder.js

import React, { Component } from 'react';
import BlogIndex from '../../components/Blog/Index';
import axios from 'axios';

class BlogIndexBuilder extends Component {
  state = {
    posts: []
  };

  componentDidMount() {
    axios
      .get(
        "http://public-api.wordpress.com/rest/v1/sites/xxxxx.wordpress.com/posts"
      )
      .then(res => {
        this.setState({ posts: res.data.posts });
        console.log(this.state.posts);
      })
      .catch(error => console.log(error));
  }

  parseOutScripts(content) {}

  render() {
    return (
      <div>
       <BlogIndex 
        posts={this.state.posts}
       />
      </div>
    );
  }
}

export default BlogIndexBuilder;

app/src/components/Blog/Index.js

import Layout from '../../components/Layout/Layout';
import Header from '../../components/Header/Header';
import { Link } from 'react-router-dom';
import './Index.css';
import BlogBanner from '../../images/img-blog-banner.png';
import Moment from 'moment';
    
    class Index extends Component {
      removeUnicode(string) {
        if (string.indexOf("&#8211;") >= 0) {
          return this.removeUnicode(string.replace("&#8211;", "'"));
        } else {
          return string.replace("<p>", "").replace("[&hellip;]</p>", "...");
        }
      }
    
      render() {
        return(
          <Layout>
            <div className="blog_index_section">
              <Header />
              <div>
                  <ul>
                    {this.props.posts.map((post) => {
                      if (post) {
                        return(
                          <li key={post.ID} className="card">
                            <Link to={`/blogs/${post.ID}`}>
                              {post.featured_image ? (
                                <img alt="blog header" src={post.featured_image} />
                              ) : (
                                <img src={BlogBanner} alt="BlogBanner"/>
                              )}
                              <div>
                                <div>{post.title}</div>
                                <div>{this.removeUnicode(post.excerpt)}</div>
                              </div>
                            </Link>
                          </li>
                        );
                      } else {
                        return null;
                      }
                    })}
                  </ul>
              </div>
    
            </div>
          </Layout>
        );
      }
    }
    
    export default Index;

标签： cssreactjs

解决方案

解决它。

控制台中的错误显示是：

Cross-origin redirection to https://public-api.wordpress.com/rest/v1/sites/xxx.wordpress.com/posts denied by Cross-Origin Resource Sharing policy: Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load http://public-api.wordpress.com/rest/v1/sites/xxx.wordpress.com/posts due to access control checks.

这似乎只在野生动物园中显示。

修复错误的解决方案： 如何克服 ReactJS 中的 CORS 问题

推荐阅读