Reactjs 确定要呈现哪个React元素的If语句

我创建了一个Sprite组件，它将“icon”作为道具，并确定要渲染哪个svg，但我遇到了一些奇怪的行为

我不得不求助于这种方法，因为我还没有找到一种使用svg的方法（如何更改它们的填充颜色！）

const-Sprite:React.SFC=（props:ISpriteProps）=>{
const color=props.color | |‘#ACACAC’
让图标
如果（props.icon=='pin'）{
图标=
}否则如果(
props.icon==='profile'
) {
图标=
}
返回(
{icon}
)
}
导出默认精灵

像这样使用my

组件中的

<Nav styles={this.state.styles}>
    <ProfileIcon onClick={this.onProfileSelected}>
    <Sprite icon='profile' 
    color={this.state.viewing === 'profile' ? '#5A4DB2' : ''} />
    </ProfileIcon>
    <LogoIcon onClick={this.onLogoSelected}>
      <h1>
        <img src={logo} alt="zestly" />
      </h1>
    </LogoIcon>
    <MessagesIcon>
      <img src={chat} onClick={this.onMessageSelected} 
      alt="messages" />
    </MessagesIcon>
  </Nav>

const Card: React.SFC<{}> = (place) => {
  return (
    <CardOuter>
        <CardPhoto>
            <span>
                <Sprite icon='pin' color='#fff' />Fitzroy</span>
        </CardPhoto>
        <CardDetails>
            <div>
                <h3>Vegie bar</h3>
                <h4>7:00pm</h4>
            </div>
            <ProfileIcons />
        </CardDetails>
    </CardOuter>
  )
}

在我的

组件中

<Nav styles={this.state.styles}>
    <ProfileIcon onClick={this.onProfileSelected}>
    <Sprite icon='profile' 
    color={this.state.viewing === 'profile' ? '#5A4DB2' : ''} />
    </ProfileIcon>
    <LogoIcon onClick={this.onLogoSelected}>
      <h1>
        <img src={logo} alt="zestly" />
      </h1>
    </LogoIcon>
    <MessagesIcon>
      <img src={chat} onClick={this.onMessageSelected} 
      alt="messages" />
    </MessagesIcon>
  </Nav>

const Card: React.SFC<{}> = (place) => {
  return (
    <CardOuter>
        <CardPhoto>
            <span>
                <Sprite icon='pin' color='#fff' />Fitzroy</span>
        </CardPhoto>
        <CardDetails>
            <div>
                <h3>Vegie bar</h3>
                <h4>7:00pm</h4>
            </div>
            <ProfileIcons />
        </CardDetails>
    </CardOuter>
  )
}

const-Card:React.SFC=（place）=>{
返回(
菲茨罗伊
蔬菜酒吧
下午7:00
)
}

出于某种原因，我选择传递给导航组件Sprite的图标道具也决定了Sprite在CardBlock中的渲染内容

例如，如果我在导航中将其设置为“profile”，那么即使我专门输入了“pin”，所有精灵也会呈现精灵的profile图标。如果我在导航中将其切换为“pin”，所有CardBlock精灵将呈现pin图标

我不明白，这是不是有点奇怪

编辑：所以我认为这与无状态功能组件渲染有关，所以我将Sprite更改为组件

class Sprite extends React.Component<ISpriteProps, {}> {
public render() {

    const color = this.props.color || '#ACACAC'


    const icons = {
        'profile': Profile,
        'pin': Pin
    }
    const ActiveIcon = icons[this.props.icon]


    return (
        <ActiveIcon color={color} />
    )
}
}

类精灵扩展了React.Component{
公共渲染（）{
const color=this.props.color | |'#ACACAC'
常量图标={
“配置文件”：配置文件，
“pin”：pin
}
const ActiveIcon=icons[这个.props.icon]
返回(
)
}
}

仍然没有爱，如果我在导航组件中将“profile”作为图标道具传递给Sprite，它会将它们全部渲染为配置文件图标

---

编辑：已解决。svg的

有些问题，您可以使用classnames库来选择应该添加到React元素的类，包括svg。在css中，你可以给出你想要的填充规则

对不起，这不能解决我的问题。