Question

我有一个简单的表示组件，在一个设计精美的盒子里显示文本，即一堆DIV。我的组件需要三个道具：header，displayText和isHtml。

有时候，我需要传递给我的displayText prop简单文本，有时候传递包含HTML的东西，比如超链接。

例如，我可以将Hello World!或<a href="http://www.google.com">Click for Google</a>传递给displayText道具。每当我将HTML传递给displayText时，isHtml都会设置为TRUE。

我遇到的问题是PropType设置为string displayText，但如果我发送带有HTML标签的文字，那么它就会成为object而我得到一个错误，说道具得到object，但期待string。

我该如何处理这个scneario？

我的组件如下所示：

const MyComponent = ({ header, displayText, isHtml }) => {

    const renderHtml = () => {

        return { __html: displayText }
    }

    return (
        <div className="my-fancy-classes">
            <span className="some-more-fancy-classes">{header}</span>
            {isHtml
                ? <div className="some-class" dangerouslySetInnerHTML={renderHtml()} />
                : <div className="some-class">{displayText}</div>
            }
        </div>
    );
}

MyComponent.propTypes = {

    header: PropTypes.string.isRequired,
    displayText: PropTypes.string.isRequired,
    isHtml: PropTypes.bool.isRequired
};

以下是我的组件声明在父JSX组件IF中发送HTML的内容：

getMyText() {

   let displayText = "";
   if(this.props.isHtml)
      displayText = '<a href="http://www.google.com">Click for Google</a>';

   return displayText;
}

...
<div>
   <MyComponent header="Title" displayText={this.getMyText()} isHtml={true} />
</div>

如果我发送简单文本，它将如下所示：

<div>
   <MyComponent header="Title" displayText={this.props.someProp} isHtml={false} />
</div>

Answer 1

根据https://facebook.github.io/react/docs/typechecking-with-proptypes.html，你应该使用PropTypes.node来表示任何可以呈现的内容：

//可以渲染的任何东西：数字，字符串，元素或数组 //（或片段）包含这些类型。 optionalNode：PropTypes.node，

所以你会有

MyComponent.propTypes = {
  header: PropTypes.string.isRequired,
  displayText: PropTypes.node.isRequired,
  isHtml: PropTypes.bool.isRequired
};

如果您想在一个道具中拥有多种类型的PropType，也可以使用oneOfType

修改

如果您直接返回JSX，看起来您甚至可能不需要dangerouslySetInnerHTML等等：

getMyText() { let displayText = ""; if (this.props.isHtml) // Remove quotes around html displayText = <a href="http://www.google.com">Click for Google</a>; return displayText; }

-

const MyComponent = ({ header, displayText, isHtml }) => { return ( <div className="my-fancy-classes"> <span className="some-more-fancy-classes">{header}</span> <div className="some-class">{displayText}</div> </div> ); }

Answer 2

由于您已将displayText prop定义为string类型，因此它不适用于html对象。你需要像这样定义它。

displayText: PropTypes.any.isRequired,

这里任何一种都可以让你传递displayText prop中的任何类型的内容。

处理可能包含或不包含HTML的道具

2 个答案: