javascript - 在 reactjs 中呈现本地镜像/javascript 片段

Question

我有一些时间在 React 中渲染:

1) 对于我正在处理的元素，显示从网站提供的图像没有问题，但是当我尝试从我的本地机器提供文件/保存在我的硬盘上时，我得到 404错误。

这个有效:

import React, { Component } from 'react'
import { render } from 'react-dom'


    export default class aPage extends Component {

      render() {
        return (
          <div>
            <div className="kittensExample">
               <img className="kittens" src = 'https://kittensonsomewebpage.jpg' />
            </div>
          </div>
        )
      }
    }

这不:

import React, { Component } from 'react'
import { render } from 'react-dom'


export default class aPage extends Component {

  render() {
    return (
      <div>
        <div className="localCompKittens">
          <img className="kittens" src = './img/kittens.jpg' />

        </div>

      </div>
    )
  }
}

2) 如何在 jsx/react 中显示 javascript 片段而不出现任何错误？ (比如在堆栈溢出时在此处显示代码片段)。浏览器似乎试图运行代码(并拒绝它) '<script>';...'</script>';' 实现不起作用:)

非常感谢!

Answer 1

所以这些看起来像是两个不同的问题。

第一个必须与提供文件的位置有关。尝试删除“./”并将其更改为 /或在本地提供您的应用程序的任何公共(public)路径。如果您使用的是 webpack，则可以使用加载程序 ( file-loader ) 让您执行 require('path to image')当它被吐出时，它就会有正确的路径。

第二个其实很有趣。你不能只使用 <pre>和 <code/>因为 JSX 不是普通的 HTML。它是一个预处理器，将完成创建 React.createElement 的工作。在需要的地方为您服务。如果您尝试以下操作，让我们看看您可能会得到什么

var Code = React.createClass({
  render() {
    return (
      <pre>
        <code>
          function foo() {}
        </code>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);

关闭!你得到 function foo()渲染到屏幕上。我们缺少 {}因为这是 JSX 知道评估 JavaScript 表达式的一种方式。但我们实际上可以利用它来发挥我们的优势。使用 ES6 字符串文字，它可以是多行的，被 JSX 表达式语法 ( {} ) 包围来显示代码片段。

var Code = React.createClass({
  render: function() {
    return (
      <pre>
        <code>
         {`function foo() {}`}
        <code/>
      </pre>
    );
  }
});

ReactDOM.render(
  <Code />,
  document.getElementById('container')
);

这样，您就可以绕过 JSX 使用的一些怪癖/语法并仍然输出代码。