SVG thẻ sử dụng và ReactJS

Question

Vì vậy, thường bao gồm hầu hết các biểu tượng SVG của tôi đòi hỏi phải có phong cách đơn giản, tôi làm:

<svg> 
    <use xlink:href="/svg/svg-sprite#my-icon" /> 
</svg> 

Bây giờ tôi đã được chơi với ReactJS càng về cuối đánh giá nó như là một thành phần có thể trong tôi Tuy nhiên, tôi nhận thấy rằng trong danh sách các thẻ/thuộc tính được hỗ trợ, không hỗ trợ use hoặc xlink:href.

Có thể sử dụng các họa tiết svg và tải chúng theo cách này trong ReactJS không?

Answer 1

Phản hồi không hỗ trợ tất cả thẻ SVG như bạn nói, có danh sách các thẻ được hỗ trợ here. Họ đang làm việc trên hỗ trợ rộng hơn, f.ex trong this ticket.

Một phương pháp phổ biến là để tiêm HTML thay cho thẻ không được hỗ trợ, f.ex:

render: function() { 
    var useTag = '<use xlink:href="/svg/svg-sprite#my-icon" />'; 
    return <svg dangerouslySetInnerHTML={{__html: useTag }} />; 
} 

Answer 2

Tính đến Phản ứng 0,14, xlink:href có sẵn qua Phản ứng là tài sản xlinkHref. Nó được đề cập là một trong những "cải tiến đáng chú ý" trong số release notes cho 0,14.

<!-- REACT JSX: --> 
<svg> 
    <use xlinkHref='/svg/svg-sprite#my-icon' /> 
</svg> 

<!-- RENDERS AS: --> 
<svg> 
    <use xlink:href="/svg/svg-sprite#my-icon"></use> 
</svg> 

Cập nhật 3: Tại thời điểm viết bài, Phản ứng thuộc tính SVG chủ thể được tìm thấy here.

Cập nhật 2: Dường như tất cả thuộc tính svg bây giờ sẽ có sẵn thông qua phản ứng (xem sáp nhập svg attribute PR).

Cập nhật 1: Bạn có thể muốn theo dõi số svg related issue trên GitHub để nhận thêm hỗ trợ SVG. Có những phát triển trong công trình.

Demo:

const svgReactElement = (
 
    <svg 
 
    viewBox="0 0 667 667" 
 
    width="100" 
 
    height="100" 
 
    > 
 
    <image width="667" height="667" xlinkHref="https://i.imgur.com/w7GCRPb.png"/> 
 
    </svg> 
 
) 
 

 
var resultHtml = ReactDOMServer.renderToStaticMarkup(svgReactElement) 
 
document.getElementById('render-result-html').innerHTML = escapeHtml(resultHtml) 
 

 
ReactDOM.render(svgReactElement, document.getElementById('render-result')) 
 

 
function escapeHtml(unsafe) { return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom-server.browser.development.js"></script> 
 

 
<h2>Render result of rendering:</h2> 
 
<pre>&lt;svg 
 
    viewBox="0 0 667 667" 
 
    width="100" 
 
    height="100" 
 
&gt; 
 
    &lt;image width="667" height="667" xlinkHref=&quot;https://i.imgur.com/w7GCRPb.png&quot; /&gt; 
 
&lt;/svg&gt;</pre> 
 

 
<h2><code>ReactDOMServer.renderToStaticMarkup()</code> output:</h2> 
 
<pre id="render-result-html"></pre> 
 
<h2><code>ReactDOM.render()</code> output:</h2> 
 
<div id="render-result"></div>

Answer 3

Tôi tạo ra một helper ít mà làm việc xung quanh vấn đề này: https://www.npmjs.com/package/react-svg-use

đầu tiên npm i react-svg-use -S sau đó chỉ cần

import Icon from 'react-svg-use' 

React.createClass({ 
    render() { 
    return (
     <Icon id='car' color='#D71421' /> 
    ) 
    } 
}) 

và điều này sau đó sẽ tạo ra đánh dấu sau

<svg> 
    <use xlink:href="#car" style="fill:#D71421;"></use> 
</svg> 

Answer 4

Như đã nói trong câu trả lời của Jon Surrell, thẻ sử dụng được hỗ trợ ngay bây giờ. Nếu bạn không sử dụng JSX, bạn có thể thực hiện nó như thế này:

React.DOM.svg({ className: 'my-svg' }, 
    React.createElement('use', { xlinkHref: '/svg/svg-sprite#my-icon' }, '') 
) 

Answer 5

Nếu bạn gặp xlink:href, sau đó bạn có thể nhận được tương đương trong ReactJS bằng cách loại bỏ các thư ruột kết và camelcasing các văn bản bổ sung: xlinkHref.

Có thể bạn sẽ sử dụng các thẻ không gian tên khác trong SVG, như xml:space, v.v.Quy tắc tương tự cũng áp dụng cho chúng (tức là, xml:space trở thành xmlSpace).