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="localCompKittens">
          <img className="kittens" src = './img/kittens.jpg' />

        </div>

      </div>
    )
  }
}

这个，不是：

'&lt;script&gt';...'&lt;/script&gt';'

2）如何在jsx / react中显示javascript片段而没有任何错误？（比如在堆栈溢出时显示代码片段）。浏览器似乎试图运行代码（并拒绝它）{{1}}实现不起作用：）

非常感谢！

Answer 1

使用此语法

<img className="kittens" src={require('./img/kittens.jpg')} />

在webpack中使用url-loader。这将内联一些图像，如果它不是太大，并将文件复制到您的分发包中，如果它太大。

我相信你可以通过使用模板文字让webpack逃脱你的所有代码：

＆LT; DIV＆GT; {`我的代码`} ＆LT; / DIV＆GT;

Answer 2

所以这些似乎是两个不同的问题。

第一个必须与文件的提供位置。尝试删除“./”并将其更改为/或在本地为您的应用提供服务的公共路径。如果您正在使用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使用的一些怪癖/语法，并仍然输出代码。

在reactjs中渲染本地图像/ javascript片段

2 个答案: