[英]How to return a variable in jsx and react into a react component
I am at the very beginning of creating an icon picker for sanity.io with react icons npm package.我刚开始为 sanity.io 使用 react 图标 npm 包创建图标选择器。 I am stuck on trying to map over an object and returning the right code for react to work using Object.values(ReactIcons).map...
if I just console log one of the objects values like so ReactIcons.Fa500Px
I get the following function我被困在试图对象映射过来,返回正确的代码使用反应工作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-…
Now If I take the same code form the console.log and put it in a jsx or React component brackets like so <ReactIcons.Fa500Px />
it renders the icon just fine现在,如果我从 console.log 中获取相同的代码并将其放入 jsx 或 React 组件括号中,例如<ReactIcons.Fa500Px />
它会很好地呈现图标
However if I try to do that inside the map method with something like this I just get a bunch of elements in the dom the look like <x></x>
.但是,如果我尝试在 map 方法中使用类似的方法执行此操作,我只会在 dom 中获得一堆元素,看起来像<x></x>
。 However the console.log(x) returns a series of the functions that are the same format as the one above that I just placed inside brackets before, which resulted in a icon being rendered.然而,console.log(x) 返回了一系列与上面我刚刚放在括号内的格式相同的函数,这导致了一个图标被渲染。
{Object.values(ReactIcons).map(x =>{
return (
<>
{console.log(x)}
<x/>
</>
);
})}
My final attempt to get this to work was to create a Icon function and pass props into it and render it as a component.我让这个工作的最后一次尝试是创建一个 Icon 函数并将 props 传递给它并将其渲染为一个组件。 Which did not work but here is that attempt.哪个不起作用,但这是尝试。
function Icon(props){
return(
<>
{props.value}
</>
)
}
{Object.values(ReactIcons).map(x =>{
return (
<>
{console.log(x)}
<Icon value={x}/>
</>
);
})}
Here's the entire code base in order just to make sure maybe I am putting my Icon function in the wrong place.这是整个代码库,以确保我可能将 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;
I guess that you would like to loop in the object key instead我猜你想在对象键中循环
{Object.keys(ReactIcons).map(x =>{
let Elm = ReactIcons[x]
return (
<Elm />
);
})}
I'm just guessing I'm not sure我只是猜测我不确定
I got help form the sanity slack, and this ended up solving my problem我得到了理智上的帮助,这最终解决了我的问题
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.