REACT動態注入SVG。 react-svg

我有一個愚蠢的組件，可以從weather API中傳遞道具。我希望能夠根據從API返回的內容動態更改SVG圖像。我已經安裝了一個npm模塊react-svg：https://github.com/atomic-app/react-svg。這有我也安裝的svg-injector：https://www.npmjs.com/package/svg-injector的依賴關係。我目前正在運行這些依賴關係依賴的npm，react和react-dom的所有正確版本。目前，我只是試圖使用react-svg模塊插入SVG。下面是該文件：REACT動態注入SVG。 react-svg

import React, {PropTypes} from 'react'; 
import styles from '../common/contentBoxStyles'; 
import ReactSVG from 'react-svg'; 

const WeatherReport = ({report}) => { 
return (
    <div style={styles.body} className="row"> 
     <div style={styles.weatherBoxContainer}> 
      <div className="col-sm-2 col-md-offset-1" style={styles.weatherBoxContainer.weatherCard}> 
       <div style={styles.weatherBoxContainer.weatherReport}> 
        <ReactSVG path={'../common/svg/O1n.svg'} callback={(svg) => console.log(svg)} /> 
        <div className="row" style={styles.weatherBoxContainer.temps}> 
         <div className="col-sm-4"> 
          <div>{Math.floor(report.main.temp_max)}°</div> 
          <div>{Math.floor(report.main.temp_min)}°</div> 
         </div> 
         <div className="col-sm-8" style={styles.weatherBoxContainer.currentTemp}> 
          {Math.floor(report.main.temp)}° 
         </div> 
        </div> 
       </div> 
       CA 
      </div> 
      <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}> 
       <div style={styles.weatherBoxContainer.weatherReport}> 
        Report 
       </div> 
       UT 
      </div> 
      <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}> 
       <div style={styles.weatherBoxContainer.weatherReport}> 
        Report 
       </div> 
       MN 
      </div> 
      <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}> 
       <div style={styles.weatherBoxContainer.weatherReport}> 
        Report 
       </div> 
       DC 
      </div> 
      <div className="col-sm-2" style={styles.weatherBoxContainer.weatherCard}> 
       <div style={styles.weatherBoxContainer.weatherReport}> 
        Report 
       </div> 
       NY 
      </div> 
     </div> 
    </div> 
); 
}; 

WeatherReport.propTypes = { 
    report: PropTypes.object 
    }; 

export default WeatherReport;

下面是引用文件樹：

src 
|_ _components 
| |_ _dashboard 
| | |_ _WeatherReport.js 
| |_ _common 
|  |_ _svg 
|   |_ _O1n.svg

我失去的東西，需要在這裏做什麼？有沒有人有任何建議，我怎麼能解決這個問題？我應該注意到，我試圖將SVG放在dashboard文件夾中，以確保直接路徑來查看這是否可行。不幸的是，事實並非如此。

我的控制檯目前通過我的回調財產記錄： Unable to load SVG file: ../common/svg/O1n.svg undefined

的callback物業工作react-svg ..這是無法得到解決的路徑，而且我不確定，爲什麼。如果您還有其他簡單的建議，我可以接近react-svg之外的其他目標，請隨時提及。

感謝您花時間回答或幫助解決我面臨的當前困境。

來源

2016-11-23 Nappstir

你ReactSVG的path需要是相對於你從不是相對於包含ReactSVG

來源

2016-11-23 20:32:03 Jack

嘿傑克js文件服務文檔的根，我很欣賞你的反應。我想知道，如果你指的是我正在導入'ReactSVG'的路徑或ReactSVG組件屬性的路徑。 – Nappstir

與'ReactSVG'一起使用的'path'道具：' Jack

嗯。我對使用'webpack'＆'react'相當陌生。也許我不知道爲我的應用程序提供文檔根目錄。所有服務都在我的'src'文件夾下。所以理論上我應該能夠從'src'文件夾中引用我的SVG是嗎？而不是'../ common/svg/O1n.svg'（它與包含'ReactSVG'的js文件相關），它應該是'./src/components/common/svg/O1n.svg'？感謝你的幫助傑克。 – Nappstir

REACT動態注入SVG。 react-svg

回答

相關問題