我刚开始使用 react icons npm 包为 sanity.io 创建一个图标选择器。我坚持尝试映射一个对象并返回正确的代码以响应工作,Object.values(ReactIcons).map...
如果我只是控制台记录其中一个对象值,就像这样ReactIcons.Fa500Px
我得到以下函数
ƒ (props) {
return Object(__WEBPACK_IMPORTED_MODULE_0__lib__["a" /* GenIcon */])({"tag":"svg","attr":{"viewBox":"0 0 448 512"},"child":[{"tag":"path","attr":{"d":"M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-…
现在,如果我从 console.log 中获取相同的代码并将其放在 jsx 或 React 组件括号中,就像这样<ReactIcons.Fa500Px />
它可以很好地呈现图标
但是,如果我尝试使用类似这样的方法在 map 方法中执行此操作,我只会在 dom 中得到一堆看起来像的元素<x></x>
。然而,console.log(x) 返回一系列函数,这些函数的格式与我之前放在括号内的函数格式相同,这导致了一个图标被渲染。
{Object.values(ReactIcons).map(x =>{
return (
<>
{console.log(x)}
<x/>
</>
);
})}
我最后的尝试是创建一个 Icon 函数并将道具传递给它并将其呈现为组件。这没有用,但这是那个尝试。
function Icon(props){
return(
<>
{props.value}
</>
)
}
{Object.values(ReactIcons).map(x =>{
return (
<>
{console.log(x)}
<Icon value={x}/>
</>
);
})}
这是整个代码库,只是为了确保我可能将我的 Icon 函数放在错误的位置。
import React from 'react'
import PropTypes from 'prop-types'
import FormField from 'part:@sanity/components/formfields/default'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'
import * as ReactIcons from 'react-icons/fa'
console.log(ReactIcons);
const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)))
function Icon(props){
return(
<>
{props.value}
</>
)
}
class IconPickerCustom extends React.Component{
static propTypes = {
value: PropTypes.string,
onChange: PropTypes.func.isRequired
};
render = () =>{
const {type, value, onChange} = this.props
return (
<>
<FormField label={type.title} description={type.description}>
<input
type="text"
value={value === undefined ? '' : value}
onChange={event => onChange(createPatchFrom(event.target.value))}
ref={element => this._inputElement = element}
/>
</FormField>
{Object.values(ReactIcons).map(x =>{
return (
<>
{console.log(x)} // has same result as console log below, except it is all the icons
<Icon value={x}/> //neithr works
<x /> //neither works
</>
);
})}
{console.log(ReactIcons.Fa500Px)}
<ReactIcons.Fa500Px/>
</>
)
}
}
export default IconPickerCustom;