有条件地将属性（样式）添加到反应元素

Question

是否可以在我的 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>
        );
    }
}

Answer 1

你可以这样做

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

<img {...styleprops} />

有条件地将属性（样式）添加到反应元素

conditionally add attribute (style) to react element

javascript

attributes

element

conditional-statements

reactjs