React 中的内联 CSS 样式：添加随机变量答案

【问题标题】：Inline CSS Styles in React: Adding random variableReact 中的内联 CSS 样式：添加随机变量
【发布时间】：2018-12-04 23:00:25
【问题描述】：

我正在尝试让 .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>
    );
}

【问题讨论】：

标签： javascript css reactjs animation

【解决方案1】：

您可以尝试创建一个返回随机动画延迟的函数，然后为渲染中的每个元素调用它。

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

然后在该函数的渲染集样式中

<Col style = {returnRandom()}

然后每个都会有不同的动画延迟，这就是我假设你想要的。

【讨论】：