Rendering lokale Bilder/JavaScript-Schnipsel in reactjs

Question

Ich bin mit Rendering in Reaktion ein bisschen einer Zeit mit:

1) Für ein Projekt arbeite ich an, gibt es kein Problem, ein Bild anzuzeigen, das serviert wird von einer Website, aber wenn ich versuche, eine Datei von meinem lokalen Rechner/auf meiner Festplatte zu speichern, bekomme ich 404 Fehler.

Dies funktioniert: Dieses

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> 
     ) 
     } 
    } 

, nicht:

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) Wie kann ich JavaScript-Schnipsel anzuzeigen/in jsx ohne Fehler reagieren? (wie Code-Schnipsel hier auf Stapelüberlauf zeigen). Der Browser scheint zu versuchen, den Code auszuführen (und lehnt es ab) die '<script&gt';...'</script&gt';' Implementierung hat nicht funktioniert :)

Vielen Dank!

Answer 1

Also diese scheinen wie zwei verschiedene Fragen.

Die erste muss mit, wo die Datei aus bedient wird. Versuchen Sie, das './' zu entfernen und ändern Sie es in eine / oder was auch immer der öffentliche Pfad ist, der Ihre App lokal bedient. Wenn Sie Webpack verwenden, können Sie einen Loader verwenden (file-loader), damit Sie require('path to image') tun können und wenn es ausgespuckt wird, hat es den richtigen Pfad.

Die zweite ist eigentlich sehr interessant. Sie können nicht einfach <pre> und <code/> verwenden, da JSX kein normales HTML ist. Es ist ein Preprocesser, der die Arbeit des Erstellens von React.createElement für Sie erledigt, wo es benötigt wird. Lassen Sie uns sehen, was Sie bekommen könnten, wenn Sie folgendes versuchen würden:

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

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

Schließen! Sie erhalten function foo() auf dem Bildschirm gerendert. Wir vermissen die {}, weil dies eine Möglichkeit ist, wie JSX einen JavaScript-Ausdruck auswerten kann. Aber wir können das tatsächlich zu unserem Vorteil nutzen. Verwenden Sie die ES6-String-Literale, die mehrzeilig sein können, umgeben von der JSX-Ausdruckssyntax ({}), um Code-Snippets anzuzeigen.

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

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

Auf diese Weise können Sie Art von einigen der Macken umgehen/Syntax JSX verwendet und immer noch Ausgangscode.

Answer 2

1. Verwenden Sie diese Syntax

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

über URL-Lader mit webpack. Dies wird einige Bilder inline, wenn es nicht zu groß ist und kopieren Sie die Datei in Ihr Distributions-Bundle, wenn es zu groß ist.

2. glaube ich kann Ihnen webpack für Sie alle Ihre Code haben entkommen durch Vorlage Literale mit:

   < div> { `mein code`} </div>