javascript - 不允许重复的道具（SVG）
问题描述
我的反应项目中几乎没有收到警告，我真的不知道是什么原因造成的。
我正在创建一个天气应用程序，我使用多个 SVG 图像作为天气图标，但只有这 3 个向我发出警告。
这是我要像这样导入的所有 JSX 文件：
import Cloud from '../TodayForecast/Icons/Cloud';
import Rain from '../TodayForecast/Icons/Rain';
import Fog from '../TodayForecast/Icons/Fog';
import Snow from '../TodayForecast/Icons/Snow';
import Thunderstorm from '../TodayForecast/Icons/Thunderstorm';
import Clear from '../TodayForecast/Icons/Clear';
import Moon from '../TodayForecast/Icons/Moon';
然后使用根据当前天气显示正确的图标，如下所示：
功能
function switchIcons(){
if(props.description === 'Thunderstorm'){
return <Thunderstorm />
}
if(props.description === 'Drizzle'){
return <Rain />
}
//and so on...
}
在渲染中
{switchIcons()}
这是所有 3 个发出警告的文件。如您所见，我没有向它们传递任何道具。我试过用谷歌搜索，但找不到任何有用的东西。
雨.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Rain() {
return (
<div>
<svg version="1.1" id="rain" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" className="icon">
<g>
<g>
<path d="M433.886,118.357c0.87-5.385,1.314-10.726,1.314-15.957C435.2,45.935,389.265,0,332.8,0
c-44.134,0-82.372,22.349-98.347,56.508C221.542,51.2,209.656,51.2,196.267,51.2c-53.7,0-97.877,41.549-102.076,94.191
C41.557,149.589,0,193.766,0,247.467c0,56.465,45.935,102.4,102.4,102.4h290.133C458.411,349.867,512,296.277,512,230.4
C512,180.506,480.247,135.509,433.886,118.357z"/>
</g>
</g>
<g>
<g>
<path d="M123.281,359.288c-4.207-2.091-9.344-0.41-11.452,3.814L98.475,389.82c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C129.203,366.524,127.497,361.395,123.281,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M96.077,413.713c-4.216-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C101.999,420.949,100.292,415.821,96.077,413.713z"/>
</g>
</g>
<g>
</g>
<g>
<g>
<path d="M174.481,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C180.403,366.524,178.697,361.395,174.481,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M147.277,413.713c-4.215-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C153.199,420.949,151.492,415.821,147.277,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M225.681,359.288c-4.215-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C231.603,366.524,229.897,361.395,225.681,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M198.477,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C204.399,420.949,202.692,415.821,198.477,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M276.881,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C282.803,366.524,281.097,361.395,276.881,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M249.677,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C255.599,420.949,253.892,415.821,249.677,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M328.081,359.288c-4.207-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C334.003,366.524,332.297,361.395,328.081,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M300.877,413.713c-4.215-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C306.799,420.949,305.092,415.821,300.877,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M379.281,359.288c-4.215-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.233-0.401,9.353,3.814,11.46
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C385.203,366.524,383.497,361.395,379.281,359.288z"/>
</g>
</g>
<g>
<g>
<path d="M352.077,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C357.999,420.949,356.292,415.821,352.077,413.713z"/>
</g>
</g>
<g>
<g>
<path d="M430.481,359.296c-4.216-2.091-9.344-0.41-11.452,3.814l-13.355,26.718c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.355-26.718
C436.403,366.532,434.697,361.412,430.481,359.296z"/>
</g>
</g>
<g>
<g>
<path d="M403.277,413.713c-4.207-2.082-9.344-0.401-11.452,3.814l-13.85,27.699c-2.108,4.216-0.401,9.344,3.814,11.452
c1.229,0.606,2.526,0.896,3.806,0.896c3.132,0,6.144-1.724,7.646-4.719l13.85-27.699
C409.199,420.949,407.492,415.821,403.277,413.713z"/>
</g>
</g>
</svg>
</div >
)
}
export default Rain;
雾.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Fog(){
return(
<div>
<svg id="Layer_1" className="icon" viewBox="0 0 512.009 512.009" id="mist" xmlns="http://www.w3.org/2000/svg"><path d="m.755 309.061c-2.997-10.631 3.192-21.679 13.823-24.676 55.854-15.747 104.199-21.154 152.146-17.017 11.004.949 19.155 10.64 18.206 21.645s-10.623 19.159-21.646 18.207c-43.573-3.759-86.091 1.072-137.854 15.664-1.814.512-3.641.755-5.438.755-8.728.001-16.75-5.761-19.237-14.578zm313.276 110.941c10 0 18.641-7.489 19.838-17.665 1.29-10.97-6.556-20.91-17.526-22.2-25.948-3.053-49.175-7.971-71.637-12.727-33.166-7.022-64.492-13.655-102.303-14.407-38.536-.763-80.357 5.365-127.824 18.747-10.631 2.997-16.82 14.045-13.823 24.676 2.998 10.632 14.047 16.821 24.677 13.823 44.227-12.468 81.14-17.945 116.176-17.253 34.024.677 63.552 6.928 94.813 13.547 23.341 4.942 63.583 13.459 77.609 13.459zm-288.599-275.862c97.391-27.456 150.799-16.599 212.642-4.027 22.856 4.646 64.932 12.779 75.957 12.779 10 0 18.641-7.489 19.838-17.665 1.29-10.97-6.556-20.91-17.526-22.2-25.445-2.994-48.248-7.63-70.3-12.113-64.153-13.042-124.748-25.36-231.464 4.726-10.631 2.997-16.82 14.045-13.823 24.676 2.997 10.633 14.046 16.825 24.676 13.824zm-5.437-86.501c1.797 0 3.623-.244 5.438-.755 51.763-14.592 94.28-19.423 137.854-15.664 11.022.958 20.696-7.202 21.646-18.207s-7.202-20.696-18.206-21.645c-47.947-4.139-96.292 1.27-152.146 17.017-10.633 2.997-16.823 14.045-13.826 24.676 2.487 8.817 10.509 14.579 19.24 14.578zm233.046-.89c34.515 6.979 71.693 13.266 118.685 13.266 34.938 0 75.308-3.478 124.013-12.732 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.977-23.382-15.915-107.098 20.349-171.015 10.939-227.303-.443-10.819-2.193-21.378 4.813-23.567 15.639-2.19 10.826 4.812 21.378 15.639 23.567zm235.231 135.603c-46.365 8.81-86.002 12.95-121.097 12.649-48.4-.411-85.546-8.274-121.47-15.878-19.884-4.208-38.664-8.184-59.015-10.941-10.947-1.483-21.021 6.188-22.505 17.133-1.482 10.946 6.188 21.021 17.134 22.504 18.885 2.559 36.963 6.385 56.103 10.437 37.855 8.013 79.168 16.299 131.583 16.744 36.771 0 79.438-4.365 126.733-13.352 10.852-2.062 17.977-12.53 15.915-23.382-2.062-10.851-12.535-17.979-23.381-15.914zm0 91.634c-107.098 20.35-171.015 10.938-227.303-.443-10.819-2.19-21.378 4.813-23.567 15.639s4.813 21.378 15.64 23.567c34.515 6.979 71.693 13.266 118.685 13.266 34.938 0 75.308-3.478 124.013-12.732 10.852-2.062 17.977-12.53 15.915-23.382-2.064-10.852-12.537-17.981-23.383-15.915zm0 176c-117.687 22.362-181.486 9.105-243.187-3.714-19.679-4.089-38.267-7.951-58.395-10.678-10.947-1.481-21.021 6.188-22.505 17.133-1.482 10.946 6.188 21.021 17.134 22.504 18.736 2.539 36.656 6.262 55.629 10.204 38.251 7.947 79.619 16.543 134.757 16.543 34.921 0 75.369-3.449 124.033-12.696 10.852-2.062 17.977-12.53 15.915-23.382-2.062-10.851-12.535-17.978-23.381-15.914zm0-89c-35.998 6.84-65.849 10.778-91.258 12.039-11.032.547-19.531 9.935-18.984 20.967.531 10.695 9.368 19.009 19.959 19.009.334 0 .671-.008 1.008-.025 27.27-1.354 58.914-5.505 96.742-12.693 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.978-23.382-15.915zm-90.267-213.986c25.238-1.252 55.162-5.372 97.733-13.461 10.852-2.062 17.977-12.53 15.915-23.382-2.063-10.852-12.536-17.978-23.382-15.915-40.665 7.727-67.957 11.517-91.258 12.673-11.032.547-19.531 9.935-18.984 20.967.532 10.695 9.386 19.118 19.976 19.118zm-315.789 288.825c-21.501 3.027-43.625 7.79-67.638 14.56-10.631 2.997-16.82 14.045-13.823 24.676 2.486 8.817 10.509 14.578 19.239 14.578 1.797 0 3.623-.244 5.438-.755 22.263-6.276 42.661-10.675 62.362-13.449 10.938-1.54 18.556-11.655 17.016-22.593-1.54-10.939-11.667-18.554-22.594-17.017zm0-266.63c-20.292 2.857-42.531 6.477-67.638 13.555-10.631 2.997-16.82 14.045-13.823 24.676 2.486 8.817 10.509 14.579 19.239 14.579 1.797 0 3.623-.244 5.438-.756 22.82-6.433 43.459-9.783 62.362-12.445 10.938-1.54 18.556-11.655 17.016-22.593-1.54-10.939-11.667-18.557-22.594-17.016z"/></svg>
</div>
)
}
export default Fog;
雪.jsx
import React from 'react';
//Styles
import '../Icons/Icons.scss';
function Snow(){
return(
<div>
<svg version="1.1" id="snow" xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.661 52.661" className="icon">
<g>
<path d="M41.527,29.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
l-2.83-1.634c-0.478-0.276-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634l-2.83,1.634
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C41.639,30.905,41.803,30.293,41.527,29.815z"/>
<path d="M20.527,29.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
l-2.83-1.634c-0.478-0.276-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634l-2.83,1.634
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C20.639,30.905,20.803,30.293,20.527,29.815z"/>
<path d="M41.527,3.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634V1.815c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L32.5,3.449
c-0.478-0.277-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L31.5,8.449c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1V8.547
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C41.639,4.905,41.803,4.293,41.527,3.815z"/>
<path d="M20.527,3.815c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634V1.815c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L11.5,3.449
c-0.478-0.277-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L10.5,8.449c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1V8.547
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C20.639,4.905,20.803,4.293,20.527,3.815z"/>
<path d="M31.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
L22.5,42.48c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L21.5,47.48
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C31.639,43.936,31.803,43.325,31.527,42.846z"/>
<path d="M10.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L1.5,42.48
c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L0.5,47.48c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634
l2.83-1.634C10.639,43.936,10.803,43.325,10.527,42.846z"/>
<path d="M52.527,42.846c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268
L43.5,42.48c-0.478-0.276-1.09-0.112-1.366,0.366s-0.112,1.09,0.366,1.366l2.83,1.634L42.5,47.48
c-0.479,0.276-0.643,0.888-0.366,1.366c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268
c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634C52.639,43.936,52.803,43.325,52.527,42.846z"/>
<path d="M21.134,22.846c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1
s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366
c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L22.5,16.48
c-0.478-0.277-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L21.5,21.48
C21.022,21.756,20.858,22.368,21.134,22.846z"/>
<path d="M0.134,22.846c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1
s1-0.448,1-1v-3.268l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5
c0.276-0.479,0.112-1.09-0.366-1.366l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366
c-0.277-0.479-0.89-0.643-1.366-0.366l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L1.5,16.48
c-0.478-0.277-1.09-0.113-1.366,0.366c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L0.5,21.48
C0.022,21.756-0.142,22.368,0.134,22.846z"/>
<path d="M52.161,21.48l-2.83-1.634l2.83-1.634c0.479-0.276,0.643-0.888,0.366-1.366c-0.277-0.479-0.89-0.643-1.366-0.366
l-2.83,1.634v-3.268c0-0.552-0.447-1-1-1s-1,0.448-1,1v3.268L43.5,16.48c-0.478-0.277-1.09-0.113-1.366,0.366
c-0.276,0.479-0.112,1.09,0.366,1.366l2.83,1.634L42.5,21.48c-0.479,0.276-0.643,0.888-0.366,1.366
c0.186,0.321,0.521,0.5,0.867,0.5c0.17,0,0.342-0.043,0.499-0.134l2.83-1.634v3.268c0,0.552,0.447,1,1,1s1-0.448,1-1v-3.268
l2.83,1.634c0.157,0.091,0.329,0.134,0.499,0.134c0.346,0,0.682-0.179,0.867-0.5C52.803,22.368,52.639,21.756,52.161,21.48z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</div>
)
}
export default Snow;
解决方案
您的svg标签有重复的道具。
- 在雨中是
xlmns - 在雾中是
id - 在雪中是
xlmns
如果您从中删除重复的道具，它将停止显示警告
推荐阅读
- swift - Swift collectionview 在幻灯片对齐时幻灯片
- html - 通过'pre'标签分配字体系列
- javascript - divs 上的 responsive.recalc 从“显示：无”更改为“显示：块”
- legend - 断字图例 - eCharts
- jboss - JBoss/MAT 分析抱怨 org.jboss.vfs.spi.javaZipFileSystem
- c - 在 linux 中修改目标文件的函数外部参照的优雅方法
- html - 图像的可点击区域 - 即使屏幕改变大小 html
- php - UnitTest - 检查方法的行为或结果？
- r - 从命名向量中删除名称并仅获取值
- python - Tensorflow 中的 Adam 优化器和正则化