React中的內聯CSS樣式：添加隨機變量

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，然后為render中的每個元素調用它。

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

然后以該功能的渲染設置樣式

<Col style = {returnRandom()}

然后每個人都會有不同的動畫延遲，這就是我假設您想要的。