Question

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

我不得不求助于这种方法，因为我无法找到一种与svg一起工作的方法（如何更改其填充颜色！）

var sumTemp = arr[i][j] + arr[i][j + 1] + arr[i][j + 2] + arr[i + 1][j + 1] + arr[i + 2][j] + arr[i + 2][j + 1] + arr[i + 2][j + 2];

像这样在const Sprite: React.SFC<ISpriteProps> = (props: ISpriteProps) => { const color = props.color || '#ACACAC' let icon if (props.icon === 'pin') { icon = <Pin color={color} /> } else if ( props.icon === 'profile' ) { icon = <Profile color={color} /> } return ( <React.Fragment> {icon} </React.Fragment> ) } export default Sprite组件中使用<Sprite/>

<Navigation/>

并在我的<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>组件中

<CardBlock/>

由于某种原因，我选择传递给导航组件Sprite的图标道具也确定了CardBlock中为Sprite呈现的内容。

例如，如果我在“导航”中将其设置为“个人资料”，即使我专门传递“ pin”，它也会使所有精灵也呈现Sprite的个人资料图标。如果我在导航中将其切换为“固定”，则所有CardBlock精灵都会呈现该固定图标。

我不明白，这是怪异的React渲染怪癖吗？

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

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>
  )
}

仍然没有爱，如果我将“个人资料”作为图标道具传递给“导航”组件中的Sprite，它将全部渲染为个人资料图标。

编辑：已解决。 svg的内容有问题

Answer 1

您可以使用classnames库来选择应添加到React元素的类，包括svg。然后在css中给出所需的填充规则。 https://github.com/JedWatson/classnames

if语句确定要呈现哪个React元素，行为异常

1 个答案: