javascript - React Marquee 模块给出错误

Question

使用 react-text-marquee module 时，我在 Chrome 开发工具控制台中收到错误消息 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

完整的 Session.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;

Answer 1

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

选项 1:在运行时更改 text 属性的类型:

import PropTypes from 'prop-types';

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

但是，如果库的作者决定进行更改，导致您对其组件的使用不正确，则可能会出现问题。

选项 2: fork 存储库，更改源中的 propTypes 字段，并在更新库的 package.json 中的版本后，在您项目的 package.json:

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

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