條件渲染的問題反應

所以我在官方檔案和 STO 上閱讀了很多關于反應條件渲染的內容，但我有一些問題和疑問。

     return (
        
        <div className="container is-fluid">
          {games.map((game) => (
            
           <div className="gameContainer" key={game.id}>
             
    
        {!!`${game.live_embed_url}` && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>)}
    
    
            <h2 className="h2__whiteuk-text-large">{game.name}{game.live_embed_url}</h2>
            </div>
          ))}
        </div>
      );

我的目標是我正在嘗試檢查{game.embed_url}NULL 的值是否<iframe>應該呈現，否則<iframe>應該呈現，

Ofc 使用 if/else 會更簡單，但由于我在 return 中，所以我不能使用它，我不知道如何繼續。

如果這個問題太基本了，我很抱歉，但我花了太多時間試圖弄清楚它，只是不斷破壞我的應用程式。

uj5u.com熱心網友回復：

只需將邏輯提取到函式并使用 if：

const renderIframe = (game) => {
  if (!game.live_embed_url) {
    return null;
  }

  return (
    <iframe
      src={`${game.live_embed_url}&parent=localhost`}
      frameBorder="2"
      allowFullScreen="true"
      scrolling="no"
      height="378"
      width="620"
    ></iframe>
  );
};

return (
  <div className="container is-fluid">
    {games.map((game) => (
      <div className="gameContainer" key={game.id}>
        {renderIframe(game)}

        <h2 className="h2__whiteuk-text-large">
          {game.name}
          {game.live_embed_url}
        </h2>
      </div>
    ))}
  </div>
);

編輯： 就像對 OP 和任何閱讀此內容的人的說明一樣，他們嘗試執行的模式稱為短路，當您使用它代替 if 時，某些人可以將其視為反模式。示例：https ://www.codereadability.com/dont-use-short-circuiting-when-you-want-an-if-statement/

我個人并不反對它，但認為使用ifs可以提高可讀性。

uj5u.com熱心網友回復：

我相信你需要在這種情況下使用三元運算子：

{
game.live_embed_url ?
    (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>) 
    : null
}

uj5u.com熱心網友回復：

您不需要!!檢查價值。現在發生的事情是，如果 game.embed_url 未定義，由于“未定義”字串，${game.live_embed_url}` 將評估為!!'undefind'哪個將評估為true。

在 javascript 中，任何非空字串的計算結果為true.

您可以嘗試以下方法

{game.live_embed_url && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">
</iframe>)}

uj5u.com熱心網友回復：

你可以使用&&這種方式

return (    
    <div className="container is-fluid">
        {games.map((game) => (
            <div className="gameContainer" key={game.id}>
                {game.live_embed_url && (
                    <iframe 
                        src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" 
                        allowFullscreen="true" 
                        scrolling="no" 
                        height="378" 
                        width="620"
                    />
                )}
                <h2 className="h2__whiteuk-text-large">
                    {game.name}
                    {game.live_embed_url}
                </h2>
            </div>
          ))}
      </div>
  );  

uj5u.com熱心網友回復：

我認為這是因為您嘗試檢查game.live_embed_url內部字串文字。在 Vanilla Javascript 中，除空字串外，每個字串都被認為是真的""。嘗試丟棄字串模板：

game.live_embed_url && (<iframe src= {`${game.live_embed_url}&parent=localhost`} frameBorder="2" allowFullscreen="true" scrolling="no" height="378" width="620">

標籤：javascript 反应

上一篇：無法讓JavaScript從表單發布到表格

下一篇：當AngularJS中數字框的值發生變化時更改下拉串列的值