88

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

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

Bây giờ tôi đã chơi với ReactJS vì đánh giá muộn nó là một thành phần có thể có trong ngăn xếp phát triển giao diện người dùng mới của 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 usehoặc xlink:hrefđược hỗ trợ.

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

|
44

Cập nhật tháng 9 năm 2018 : giải pháp này không được chấp nhận, thay vào đó hãy đọc câu trả lời của Jon .

-

React không hỗ trợ tất cả các thẻ SVG như bạn nói, có một danh sách các thẻ được hỗ trợ ở đây . Họ đang làm việc trên hỗ trợ rộng hơn, f.ex trong vé này .

Một cách giải quyết phổ biến là tiêm HTML thay vì các 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 }} />;
}
|
219

MDN nói rằng xlink:href không được ủng hộ href. Bạn sẽ có thể sử dụng hrefthuộc tính trực tiếp. Ví dụ dưới đây bao gồm cả hai phiên bản.

Kể từ React 0.14 , xlink:hrefcó sẵn thông qua React là tài sản xlinkHref. Nó được đề cập như một trong những "cải tiến đáng chú ý" trong ghi chú phát hành 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 2018-06-09: Đã thêm thông tin về hrefvs xlink:hrefthuộc tính và ví dụ cập nhật để bao gồm cả hai. Cảm ơn @devuxer

Cập nhật 3 : Tại thời điểm viết, các thuộc tính SVG của React có thể được tìm thấy ở đây .

Cập nhật 2 : Dường như tất cả các thuộc tính svg nên có sẵn thông qua phản ứng (xem PR thuộc tính svg được hợp nhất ).

Cập nhật 1 : Bạn có thể muốn theo dõi vấn đề liên quan đến svg trên GitHub để có thêm hỗ trợ SVG. Có sự phát triển trong các công trình.

Bản giới thiệu:

const svgReactElement = (
  <svg
    viewBox="0 0 1340 667"
    width="100"
    height="100"
  >
    <image width="667" height="667" href="https://i.imgur.com/w7GCRPb.png"/>
    { /* Deprecated xlink:href usage */ }
    <image width="667" height="667" x="673" 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.4.1/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.1/umd/react-dom-server.browser.development.js"></script>

<h2>Render result of rendering:</h2>
<pre>&lt;svg
  viewBox=&quot;0 0 1340 667&quot;
  width=&quot;100&quot;
  height=&quot;100&quot;
&gt;
  &lt;image width=&quot;667&quot; height=&quot;667&quot; href=&quot;https://i.imgur.com/w7GCRPb.png&quot;/&gt;
  { /* Deprecated xlink:href usage */ }
  &lt;image width=&quot;667&quot; height=&quot;667&quot; x=&quot;673&quot; 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>

|
5

Nếu bạn gặp phải xlink:href, thì bạn có thể nhận được tương đương trong ReactJS bằng cách xóa dấu hai chấm và quay lại văn bản đã thêm : xlinkHref.

Cuối cùng, bạn có thể 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ự áp dụng cho chúng (nghĩa là xml:spacetrở thành xmlSpace).

|
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ể triển khai nó như thế này:

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

Tôi đã tạo một trình trợ giúp nhỏ hoạt động xung quanh vấn đề này: https://www.npmjs.com/package/react-svg-use

đầu tiên npm i react-svg-use -Ssau đó đơn giả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>
|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.