有条件地向Reaction元素添加属性(样式)

问题描述

是否可以在我的for循环中有条件地添加样式属性。此样式将在组件挂载后立即添加到我的元素中，但我希望仅当animateLight为true时才添加此属性，this.props

class Main extends Component {


    render() {

        const {animateLight} = this.props;
        const points1 = [];
        const points2 = [];
        const points3 = [];



        for (let i = 0; i < 10; i++) {
           points1.push( <img src={point1} key={i}
                        className={animateLight ? styles.pointsAppear : styles.points }
                        style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
                              alt="point"/>)

            points2.push(<img src={point2}
                            className={animateLight ? styles.pointsAppear : styles.points}
                            style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
                              alt="point"/>)
            points3.push(<img src={point3}
                            className={animateLight ? styles.pointsAppear : styles.points}
                            style={{ transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` }}
                              alt="point"/>)
            }

        return (
            <div className={styles.containerMain}>
                <div className={styles.smallContainer}>
                    <div className={cx(styles.motivContainer, { [styles.animateText]: animateLight})}>
                        <p className={styles.motivText}>
                            ...
                        </p>
                    </div>
                    <div className={styles.bulb}>
                        <img src={bulbLight}
                            className={cx(styles.motivImgLight,
                                            {[styles.lightAnimation]: animateLight}
                                        )}
                            alt="web idea" />

                            {points1}
                            {points2}
                            {points3}
                    </div>
                </div>
            </div>
        );
    }
}

推荐答案

您可以这样做

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

const styleProps = !animateLight ? {} : { style: { transform: `translate3d( ${Math.random() * 50 * i}px, ${Math.random() * 50 * i}px, 0 )` } };

<img {...styleprops} />