React PLX Element产生“超出最大更新深度”错误

时间:2018-03-12 04:03:26

标签: reactjs parallax

我像这样安装了react-plx:if (value.equals(cellValue))

以下是该模块的链接:https://www.npmjs.com/package/react-plx

我按照上面页面上的示例,在“render”下定义了这些变量:

npm install --save react-plx

有时它有效...但是其他人我得到这个错误:

render() {
    const exampleParallaxData = [
      {
        start: 100,
        duration: 400,
        easing: "ease",
        properties: [
          {
            startValue: 0,
            endValue: 250,
            property: "translateY"
          }
        ]
      }
    ];

    const styles = {
      width: 200,
      height: 100,
      lineHeight: "100px",
      textAlign: "center",
      borderRadius: 20,
      backgroundColor: "#34ba9c",
      color: "#fff",
      position: "absolute"
    };


    return (
        <div className="callToAction">
          <Plx parallaxData={exampleParallaxData} style={styles}>
            Hello
            <button className="draw">I am a button</button>
          </Plx>
        </div>
    );
      }
    }

我有什么方法可以避免这个问题,或者这是否意味着我不应该使用该软件包?

1 个答案:

答案 0 :(得分:0)

这是工作示例

&#13;
&#13;
import React from 'react';
import Plx from 'react-plx';
class TestJS extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const exampleParallaxData = [
            {
                start: 100,
                duration: 400,
                easing: "ease",
                properties: [
                    {
                        startValue: 0,
                        endValue: 250,
                        property: "translateY"
                    }
                ]
            }
        ];

        const styles = {
            width: 200,
            height: 100,
            lineHeight: "100px",
            textAlign: "center",
            borderRadius: 20,
            backgroundColor: "#34ba9c",
            color: "#fff",
            position: "absolute"
        };

        return(
            <div className="callToAction">
                <Plx parallaxData={exampleParallaxData} style={styles}>
                    Hello
                    <button className="draw">I am a button</button>
                </Plx>
            </div>
        );
    }
}

export default TestJS;
&#13;
&#13;
&#13;