代码之家 › 专栏 › 技术社区 › Matthew Pigram

React Marquee模块出现错误

marquee reactjs javascript

Matthew Pigram · 技术社区 · 6 年前

使用时,Chrome开发工具控制台中出现错误 react-text-marquee module 在react中。

我不知道如何在不将输出更改为字符串而不是JSX的情况下解决此问题。

我应该澄清一下,页面的功能实际上工作正常,但是如果错误导致后续问题,最好消除错误。

这是chrome控制台错误:

09:43:29.747 index.js:2177 Warning: Failed prop type: Invalid prop `text` of type `array` supplied to `Marquee`, expected `string`.
    in Marquee (at Session.js:86)
    in Session (at Content.js:83)
    in div (at Content.js:88)
    in Content (at App.js:13)
    in div (at App.js:11)
    in App (at index.js:9)
__stack_frame_overlay_proxy_console__ @ index.js:2177

完整的会话。js代码

import React from 'react';
import Marquee from 'react-text-marquee';
import ReactDOMServer from 'react-dom/server';

class Session extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            "showConceptLogo" : true,
            "logo" : "logo",
            "filmTitle": "2D Justice League",
            "classification": "PG",
            "sessionAttributes": [
                {
                    "key": "VMAX",
                    "text": "VMAX",
                    "color": "yellow",
                    "background": "red"
                },
                {
                    "key": "Gold",
                    "text": "Gold"
                },
                {
                    "key": "Vjnr",
                    "text": "Vjnr"
                },
                {
                    "key": "VPrem",
                    "text": "VPrem"
                },
                {
                    "key": "FWTC",
                    "text": "FWTC"
                },
                {
                    "key": "CC",
                    "text": "CC"
                }
            ],
            "screeningTime": "4:00PM"
        }
    }

    RenderAttributesElement(attr) {
        return (
            <span style={{color: attr.color, backgroundColor: attr.background}}>{attr.text} </span>
        );
    }

    ConceptLogo(props) {
        if (props.display) {
            return (
                <div className="col-md-1">
                    <h2>{props.logo}</h2>
                </div>
            );
        }

        return null;
    }

    render() {
        return (
            <div className="row">
                <this.ConceptLogo logo={this.state.logo} display={this.state.showConceptLogo} />
                <div className="col-md-6">
                    <h2>{this.state.filmTitle}</h2>
                </div>
                <div className="col-md-1">
                    <h2>{this.state.classification}</h2>
                </div>
                <div className="col-md-3">
                    <Marquee hoverToStop={true} loop={true} leading={3000} trailing={3000} text={this.state.sessionAttributes.map(this.RenderAttributesElement)} />
                </div>
                <div className="col-md-1">
                    <h2>{this.state.screeningTime}</h2>
                </div>
            </div>
        );
    }
}

export default Session;

1 回复 | 直到 6 年前

Serge Seredenko 6 年前

以下两个选项基本上只是隐藏警告。

选项1 :更改的类型 text 运行时道具:

import PropTypes from 'prop-types';

Marquee.propTypes.text = PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.array,
  ]);

但是,如果库的作者决定进行更改,从而导致您对其组件的使用不正确,则这可能会造成问题。

选项2 :分叉存储库,更改 propTypes 字段,并在更新包中的版本后。json,在项目包中设置指向它的链接。json:

"react-text-marquee": "git://github.com/yourusername/react-text-marquee"

然后你就跑 npm install 现在,您必须维护库的副本,以防作者进行错误修复或类似的操作。您甚至可以更好地描述prop类型,并向原始存储库发出请求。