Я создал компонент Sprite, который принимает 'icon' в качестве реквизита и определяет, какой svg отображать, но у меня какое-то странное поведение.
Мне пришлось прибегнуть к этому методу, потому что у меня нетНе удалось найти способ работы с SVG (как изменить их цвет заливки!)
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/> компоненте, например, так:
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, также определяет, что будет отображаться для Sprite в CardBlock.
Например, если я сделаю его «профилем» в Navigation, он заставит все спрайты отображать значок профиля для Sprite, даже если я специально передам «pin».Если я переключу его на 'pin' в Navigation, все спрайты CardBlock будут отображать значок булавки.
Я не понимаю, это какая-то странная реакция рендера React?
EDIT: Итак, яЯ подумал, что это как-то связано с рендерингом функциональных компонентов без сохранения состояния, поэтому я изменил Sprite на Component
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} />
)
}
}
Все еще не люблю, он рендерит ВСЕ из них в виде значков профиля, если я передам 'profile' в качестве значка prop для Spriteв компоненте навигации.
РЕДАКТИРОВАТЬ: Решено.Это было что-то не так с svg's