Question

我有一堆html代码，我打破它们来反应组件。我是react.js的新手。我在页脚部分做了一些更改，但是当我在浏览器中运行localhost时，它什么也没显示。有人可以帮我这个吗？

提前致谢。

class Footer extends Component {

  render () {
    return (
      <div>
        <div className="footer">
         <div className="container">
           <div className="col-md-5 f-first-part">
             <div className="row">
               <div className="col-sm-5 f-add-part">

                 <div className="contact-info">
                                <p className="address">123</p>
                                <p className="email"><a href=""></a></p>
                                <p className="tele"><a href=""> 03580368</a></p>
                 </div>

                  <div className="large-3 large-offset-2 columns">
                    <ul className="menu vertical">
                      <li><a href="#">One</a></li>
                      <li><a href="#">Two</a></li>
                      <li><a href="#">Three</a></li>
                      <li><a href="#">Four</a></li>
                    </ul>
                  </div>

                  <div className="large-3 columns">
                    <ul className="menu vertical">
                      <li><a href="#">One</a></li>
                      <li><a href="#">Two</a></li>
                      <li><a href="#">Three</a></li>
                      <li><a href="#">Four</a></li>
                    </ul>
                  </div>

                 </div>
                </div>
            </div>
          </div>
      </div>
    )
  }

export default Footer;

Answer 1

从我从你的问题中读到的， 这是您的代码

<强> Footer.js

"NetworkError: 403 Forbidden - http://localhost:8080/publicKey/lookup/TRUUS2"
TRUUS2
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/publicKey/lookup/TRUUS2. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

您需要为组件定义容器才能呈现它，在这种情况下，我创建了一个index.html文件，其div元素的id为main，

您的index.html

function loadPublicKey() {

    var xmlhttp = createCORSRequest('GET', 'http://localhost:8080/publicKey/lookup/TRUUS2');
    xmlhttp.send();

    xmlhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            alert(this.responseText);
            document.getElementById("keyDiv").innerHTML = this.responseText;
        }
    };
}


function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // Check if the XMLHttpRequest object has a "withCredentials" property.
        // "withCredentials" only exists on XMLHTTPRequest2 objects.
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        // Otherwise, check if XDomainRequest.
        // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        // Otherwise, CORS is not supported by the browser.
        xhr = null;
    }
    xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
    return xhr;
}

这会将组件加载到那里，我不知道这是否是您需要的，您需要提供更多详细信息。

同时检查您的控制台，重要信息显示在那里

问候

为什么我的浏览器在运行时显示空白页？

1 个答案: