如何 return jsx 中的变量并将其反应到反应组件中

Question

我刚开始使用 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) returns 一系列与我之前放在括号内的格式相同的函数，导致呈现一个图标。

{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;

Answer 1

我猜您想改为在对象键中循环

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

我只是猜测我不确定

Answer 2

我在理智松懈方面得到了帮助，这最终解决了我的问题

import React, { useState } 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'

// const createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)))

const Icon =({name}) =>{
  const TagName = ReactIcons[name];
  return !!TagName ? <TagName /> : <p>{name}</p>;
}

const Box = ({icon}) =>{
  return(
    <>
        {icon.map((iconsz) => {
            return(
              <>
              <button>
                <Icon name={iconsz}/>
              </button>

              </>
            )
          }     
        )}
    </>
  ) 
}

class IconPickerCustom extends React.Component{

    constructor(props){
      super(props)
      const arr = [];

      Object.keys(ReactIcons).map(go => { 
        arr.push(go);
          this.state = {icon: arr};
        }
      )
      this.handleChange = this.handleChange.bind(this)

    }

    // createPatchFrom = value => PatchEvent.from(value === '' ? unset() : set(String(value)));

    handleChange = event => {
      const value = event;
      const arr = [];
      Object.keys(ReactIcons).map(go => 
        { 
          if(go.toLowerCase().includes(value)){
            arr.push(go);
          } 
          this.setState({
            icon: arr
          });
        }
      )
    };

    render = () =>{
      const {icon} = this.state

        return (
          <>
            <input
              type="text"
              onChange={event => this.handleChange(event.target.value)}
            />
            <Box icon={icon}/>
          </>
        )
    }
}

export default IconPickerCustom;

如何 return jsx 中的变量并将其反应到反应组件中

How to return a variable in jsx and react into a react component

javascript

object

jsx

reactjs

sanity