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

我有一個簡單的表示性組件，它在一個設計良好的盒子裏顯示文本，即一堆DIV。我的組件預計有三個道具：header,displayText和isHtml。處理可能包含或不包含HTML的道具

有時，我需要傳遞給我的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>

來源

2017-09-16 Sam

您正在發送HTML或JSX？我相信你在displayText而不是HTML中發送JSX標籤。 – Panther

我在原始帖子的底部添加了一個部分。請看我如何將數據發送到我的組件。所以，我想你說我發送的是JSX，而不是HTML。無論何時我需要發送HTML，我都會像在我的例子中一樣調用一個像getMyText（）這樣的函數。如果我發送簡單文本，我只需要執行一些操作，例如'displayText = {this.props.someProp}'。所以，不知道如何處理這個。 – Sam

物體的形狀是什麼？當它是html的對象 – Chris

根據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 
};

你也可以使用oneOfType如果你想有多種類型PropTypes的一個道具

編輯

另外它看起來像你甚至不需要做dangerouslySetInnerHTML，等等，如果你只是直接返回JSX：

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> 
); 
}

來源

2017-09-16 05:35:03

我嘗試過'PropTypes.node'，但仍然收到錯誤消息。錯誤信息如下：失敗的道具類型：提供給「MyComponent」的propTextText無效，需要一個ReactNode。它將它渲染爲'[object Object]' – Sam

我也嘗試過'oneOfType'，它消除了錯誤，但它根本不呈現HTML。它仍然顯示'[object Object]' – Sam

我編輯了我的答案，請看一看 - 如果我理解正確，您可能會刪除一些代碼以使其工作。 –

既然您已經定義了displayText道具是字符串類型，它獲得不適用於html對象。你需要像這樣定義它。

displayText: PropTypes.any.isRequired,

在這裏任何可以讓你通過任何類型的內容在displayText道具。

來源

2017-09-16 05:56:10 codeslayer1

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

回答

相關問題