javascript - 如何在jsx中返回变量并 react 到react组件中

Question

我刚开始使用 React Icons npm 包为 sanity.io 创建图标选择器。我一直在尝试映射一个对象并返回正确的代码以使用 Object.values(ReactIcons).map... 进行工作 react 如果我只是控制台记录对象值之一，像这样 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 函数并将 props 传递给它并将其呈现为组件。这没有成功，但这是一次尝试。

function Icon(props){
  return(
    <>
      {props.value}
    </>
  )
}

{Object.values(ReactIcons).map(x =>{
 return (
    <>
      {console.log(x)} 
      <Icon value={x}/> 
    </>
   );
 })}

这是整个代码库，只是为了确保我可能将图标函数放在了错误的位置。

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;

Answer 1

我猜你想在对象键中循环

            {Object.keys(ReactIcons).map(x =>{
               let Elm = ReactIcons[x]
              return (
                <Elm /> 
              );
            })}

我只是猜测，我不确定