Встроенные стили CSS в React: добавление случайной величины

Question

Я пытаюсь заставить анимацию на .skill-logo начать играть в произвольное время для каждой версии.

React требует, чтобы встроенные стили передавались как объект. Что я и сделал здесь. Любые идеи относительно того, где назначить случайность?

const Skills = () => {
    let skillLogoStyle = {
        animationDelay: Math.random() + 's',
    };
    return (
        <Row className="skills-container">
            <Col xs={12} mdOffset={2} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={html} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={css} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={js} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={react} alt="HTML5 Logo"/></Col>
            <Col xs={12} md={2} lg={2}><img className="skill-logo" style={skillLogoStyle} src={node} alt="HTML5 Logo"/></Col>
        </Row>
    );
}

Answer 1

Вы можете попробовать создать функцию, которая будет возвращать случайный animationDelay, а затем вызывать его для каждого элемента рендеринга.

returnRandom = () => {
    let random = Math.random()*10;
    return {animationDelay: Math.random() + 's'}

, а затем в режиме рендеринга установить стиль этой функции

<Col style = {returnRandom()}

Тогда у каждого будет различная задержка анимации, что, как я полагаю, вы хотите.