開源日報每天推薦一個 GitHub 優質開源項目和一篇精選英文科技或編程文章原文，堅持閱讀《開源日報》，保持每日學習的好習慣。

今日推薦開源項目：《Multiple Window 3D Scene using Three.js》
今日推薦英文原文：《It』s 2023, Please Stop Using 「&&」 for Conditional Rendering in React》

開源項目 multipleWindow3dScene

今日推薦開源項目：《Multiple Window 3D Scene using Three.js》傳送門：項目鏈接

推薦理由：最近國外一些瀏覽器跨窗口通信的一些實現效果非常火
例如

原推地址
這個開源項目也是一個類似的實現項目，主要是用 localStorage 通信，可以 clone 看看如何實現的

英文原文

今日推薦英文原文：《It』s 2023, Please Stop Using 「&&」 for Conditional Rendering in React》

推薦理由：關於 react 的條件渲染，寫工程代碼時非常實用

Hey there, React developers! It』s time to step into the future and leave old habits behind.

We』re in 2023, and there』s a better way to handle conditional rendering in React than using the 「&&」 operator.

In this article, I』ll show you a more elegant and expressive approach to conditional rendering that will make your code cleaner and easier to read.

So, let』s bid farewell to 「&&」 and embrace a more modern way of conditional rendering in React.

Let』s get started!

The Old Way: Conditional Rendering with 「&&」:

In the past, many of us used the 「&&」 operator to conditionally render components or elements based on a condition.

For example, we would write code like this:

function MyComponent({ isLoggedIn }) {  
  return (  
    <div>  
      {isLoggedIn && <p>Welcome back, User!</p>}  
    </div>  
  );  
}

This approach works, but it can become ==cumbersome== and less readable when dealing with multiple conditions or more complex rendering logic.

Luckily, React has evolved, and we now have a more elegant solution.

The Modern Way: Conditional Rendering with Ternary Operator or Logical OR:

Instead of relying solely on the 「&&」 operator, we can leverage the power of the ternary operator or the logical OR (||) operator for conditional rendering.

Let』s explore both options.

  1. Conditional Rendering with Ternary Operator:

The ternary operator allows us to write concise conditional expressions, making our code more expressive. Here』s an example:

function MyComponent({ isLoggedIn }) {  
  return (  
    <div>  
      {isLoggedIn ? <p>Welcome back, User!</p> : null}  
    </div>  
  );  
}

In this code, if the 「isLoggedIn」 prop is true, we render the <p> element with the welcome message. Otherwise, we render null, effectively hiding the element.

2. Conditional Rendering with Logical OR (||) Operator:

The logical OR (||) operator provides another approach to conditional rendering.

It allows us to specify a default value when the condition is false. Here』s an example:

function MyComponent({ username }) {  
  return (  
    <div>  
      <p>Welcome, {username || "Guest"}!</p>  
    </div>  
  );  
}

In this code, if the 「username」 prop is provided, it will be rendered in the <p> element. If the "username" prop is falsy (e.g., empty string or undefined), the logical OR operator will return the default value of "Guest".

Benefits of the Modern Approach:

By using the ternary operator or the logical OR operator, we gain several benefits over the old 「&&」 approach:

  1. Readability: The code becomes more expressive and easier to understand, especially when dealing with more complex conditions or multiple render options.
  2. Flexibility: With the ternary operator, we can handle both true and false conditions, allowing for more control over the rendering logic.
  3. Default Values: The logical OR operator provides a convenient way to specify default values when the condition is false, reducing the need for additional logic.

In 2023, it』s time to bid farewell to the old 「&&」 approach for conditional rendering in React.

Embrace the modern way by using the ternary operator or the logical OR operator. These approaches offer improved readability, flexibility, and the ability to set default values.

So, let』s leave the 「&&」 operator behind and write cleaner, more expressive code.

Upgrade your React skills and adopt the modern approach to conditional rendering. Happy coding in the future!

下載開源日報APP：https://openingsource.org/2579/
加入我們：https://openingsource.org/about/join/
關注我們：https://openingsource.org/about/love/