Kết xuất có điều kiện trong React: 9 phương pháp với ví dụ – kết xuất có điều kiện trong js phản ứng

Kết xuất có điều kiện đề cập đến việc cung cấp các phần tử & thành phần dựa trên các điều kiện nhất định. Tìm hiểu cách kết xuất có điều kiện trong React.

Bạn đang xem : hiển thị có điều kiện trong phản ứng js

Người đàn ông của gia đình. Nhà phát triển Java và JavaScript. Swift và người yêu thích VR / AR. Thích sách, phim, và vẫn đang thử nhiều thứ. Tìm tôi tại eherrera.net

Ghi chú của người biên tập : Hướng dẫn này được cập nhật lần cuối vào tháng 10 năm 2020 để phản ánh những thay đổi được giới thiệu trong React 16.8 – cụ thể là cách sử dụng React Hooks Fragment để hiển thị có điều kiện.

JSX là một phần mở rộng mạnh mẽ cho JavaScript cho phép chúng tôi xác định các thành phần giao diện người dùng. Nhưng nó không hỗ trợ trực tiếp các vòng lặp hoặc biểu thức điều kiện (mặc dù việc bổ sung các biểu thức điều kiện đã được thảo luận trước đây ).

Nếu bạn muốn lặp lại danh sách để hiển thị nhiều thành phần hoặc triển khai một số logic có điều kiện, bạn phải sử dụng JavaScript thuần túy . Bạn cũng không có nhiều lựa chọn với vòng lặp. Hầu hết thời gian, bản đồ sẽ đáp ứng nhu cầu của bạn.

Nhưng kết xuất có điều kiện ? Đó là một câu chuyện khác.

Kết xuất có điều kiện trong React là gì?

Trong React, kết xuất có điều kiện đề cập đến quá trình cung cấp các phần tử và thành phần dựa trên các điều kiện nhất định.

Có nhiều cách để sử dụng kết xuất có điều kiện trong React. Như với hầu hết mọi thứ trong lập trình, một số thứ phù hợp hơn những thứ khác tùy thuộc vào vấn đề bạn đang cố gắng giải quyết.

Hướng dẫn này bao gồm các cách phổ biến nhất để triển khai hiển thị có điều kiện trong React:

Chúng tôi cũng sẽ xem xét một số mẹo và phương pháp hay nhất để triển khai hiển thị có điều kiện trong React, bao gồm:

Để chứng minh cách tất cả các phương pháp này hoạt động, chúng tôi sẽ triển khai một thành phần có chức năng xem / chỉnh sửa:

Bạn có thể thử và phân tách tất cả các ví dụ trong JSFiddle .

Chúng tôi sẽ bắt đầu với cách triển khai đơn giản nhất bằng cách sử dụng khối if ... else và xây dựng nó từ đó.

1. Cách viết if ... else trong React

Tạo một thành phần với trạng thái sau:

Ứng dụng lớp

 mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {text: '', inputText: '', mode: 'view'};
  }
} 

Bạn sẽ sử dụng một thuộc tính cho văn bản đã lưu và một thuộc tính khác cho văn bản đang được chỉnh sửa. Thuộc tính thứ ba sẽ cho biết bạn đang ở chế độ edit hay view .

Tiếp theo, thêm một số phương pháp để xử lý văn bản đầu vào, sau đó lưu và chỉnh sửa các sự kiện:

Ứng dụng lớp

 mở rộng React.Component {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);
    this.state = {text: '', inputText: '', mode: 'view'};
    
    this.handleChange = this.handleChange.bind (this);
    this.handleSave = this.handleSave.bind (this);
    this.handleEdit = this.handleEdit.bind (this);
  }
  
  handleChange (e) {
    this.setState ({inputText: e.target.value});
  }
  
  handleSave () {
    this.setState ({text: this.state.inputText, mode: 'view'});
  }

  handleEdit () {
    this.setState ({mode: 'edit'});
  }
} 

Bây giờ, đối với phương thức render , hãy kiểm tra thuộc tính trạng thái mode để hiển thị nút chỉnh sửa hoặc đầu vào văn bản và nút lưu, ngoài văn bản đã lưu :

Ứng dụng lớp

 mở rộng React.Component {
  //…
  kết xuất () {
    if (this.state.mode === 'view') {
      trở về (
        & lt; div & gt;
          & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
          & lt; nút onClick = {this.handleEdit} & gt;
            Chỉnh sửa
          & lt; / nút & gt;
        & lt; / div & gt;
      );
    } khác {
      trở về (
        & lt; div & gt;
          & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
            & lt; đầu vào
              onChange = {this.handleChange}
              value = {this.state.inputText}
            / & gt;
          & lt; nút onClick = {this.handleSave} & gt;
            Tiết kiệm
          & lt; / nút & gt;
        & lt; / div & gt;
      );
    }
} 

Dưới đây là Fiddle hoàn chỉnh để dùng thử:

Khối if ... else là cách dễ nhất để giải quyết vấn đề, nhưng tôi chắc rằng bạn biết đây không phải là cách triển khai tốt.

Nó hoạt động tốt cho các trường hợp sử dụng đơn giản và mọi lập trình viên đều biết cách hoạt động của nó. Nhưng có nhiều sự lặp lại và phương thức render có vẻ đông đúc.

Vì vậy, hãy đơn giản hóa nó bằng cách trích xuất tất cả logic có điều kiện thành hai phương thức kết xuất: một phương thức kết xuất hộp nhập và phương thức khác để hiển thị nút.

Ứng dụng lớp

 mở rộng React.Component {
  //…
  
  renderInputField () {
    if (this.state.mode === 'view') {
      trả về & lt; div & gt; & lt; / div & gt ;;
    } khác {
      trở về (
          & lt; p & gt;
            & lt; đầu vào
              onChange = {this.handleChange}
              value = {this.state.inputText}
            / & gt;
          & lt; / p & gt;
      );
    }
  }
  
  renderButton () {
    if (this.state.mode === 'view') {
      trở về (
          & lt; nút onClick = {this.handleEdit} & gt;
            Chỉnh sửa
          & lt; / nút & gt;
      );
    } khác {
      trở về (
          & lt; nút onClick = {this.handleSave} & gt;
            Tiết kiệm
          & lt; / nút & gt;
      );
    }
  }

  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        {this.renderInputField ()}
        {this.renderButton ()}
      & lt; / div & gt;
    );
  }
} 

Dưới đây là Fiddle hoàn chỉnh để dùng thử:

Nếu chúng ta có nhiều hơn hai nhánh phụ thuộc vào cùng một biến để đánh giá điều kiện, thay vì có một khối if ... else lớn:

 if (this.state.mode === 'a') {
  // ...
} else if (this.state.mode === 'b') {
  // ...
} else if (this.state.mode === 'c') {
  // ...
} khác {
  // ...
}

Chúng tôi có thể sử dụng câu lệnh switch :

 switch (this.state.mode) {
  trường hợp 'a':
    // ...
  trường hợp 'b':
    // ...
  trường hợp 'c':
    // ...
  mặc định:
    // tương đương với mệnh đề else cuối cùng ...
}

Nó có thể rõ ràng hơn một chút, nhưng:

  • Nó vẫn còn quá dài dòng
  • Nó không hoạt động với nhiều / điều kiện khác nhau
  • Cũng giống như câu lệnh if ... else , bạn không thể sử dụng nó bên trong câu lệnh return với JSX (ngoại trừ khi bạn sử dụng các hàm được gọi ngay lập tức, mà tôi sẽ đề cập sau)

Hãy xem xét một số kỹ thuật bổ sung để cải thiện mã này.

Lưu ý rằng phương thức renderInputField trả về phần tử & lt; div & gt; trống khi ứng dụng ở chế độ xem. Tuy nhiên, điều này là không cần thiết.

2. Ngăn kết xuất với null

Nếu bạn muốn ẩn một thành phần, bạn có thể đặt phương thức kết xuất của nó trả về null , vì vậy không cần phải hiển thị một phần tử trống (và khác) làm trình giữ chỗ. Tuy nhiên, một điều quan trọng cần ghi nhớ khi trả về null là ngay cả khi thành phần không hiển thị, các phương thức vòng đời của nó vẫn được kích hoạt.

Lấy ví dụ, Fiddle sau đây, thực hiện một bộ đếm có hai thành phần:

Thành phần Number chỉ hiển thị bộ đếm cho các giá trị chẵn; nếu không, null được trả về. Tuy nhiên, khi nhìn vào bảng điều khiển, bạn sẽ thấy rằng componentDidUpdate luôn được gọi bất kể giá trị được trả về bởi render .

componentDidUpdate

 componentDidUpdate

Quay lại ví dụ của chúng tôi, thay đổi phương thức renderInputField thành như sau:

 renderInputField () {
    if (this.state.mode === 'view') {
      trả về null;
    } khác {
      trở về (
          & lt; p & gt;
            & lt; đầu vào
              onChange = {this.handleChange}
              value = {this.state.inputText}
            / & gt;
          & lt; / p & gt;
      );
    }
  } 

Đây là Fiddle hoàn chỉnh:

Một lợi thế của việc trả về null thay vì phần tử trống là bạn sẽ cải thiện hiệu suất của ứng dụng một chút vì React sẽ không phải ngắt kết nối thành phần để thay thế nó.

Ví dụ: khi thử phần tử Fiddle hiển thị phần tử & lt; div & gt; trống, nếu bạn mở Trình kiểm tra , bạn sẽ thấy cách phần tử & lt; div & gt; bên dưới thư mục gốc luôn được cập nhật:

Không giống như trường hợp khi trả về null để ẩn thành phần, trong đó phần tử & lt; div & gt; đó không được cập nhật khi nút Chỉnh sửa được nhấp:

Tìm hiểu thêm về điều chỉnh trong React , về cơ bản đề cập đến cách React cập nhật các phần tử DOM và cách hoạt động của thuật toán khác.

Có thể trong ví dụ đơn giản này, việc cải thiện hiệu suất là không đáng kể, nhưng khi làm việc khi các thành phần lớn, có thể có sự khác biệt. Tôi sẽ nói thêm về tác động hiệu suất của kết xuất có điều kiện ở phần sau. Bây giờ, hãy tiếp tục cải thiện ví dụ này.

3. Các biến phần tử phản ứng

Một điều tôi không thích là có nhiều hơn mộtCâu lệnh return trong các phương thức, vì vậy tôi sẽ sử dụng một biến để lưu trữ các phần tử JSX và chỉ khởi tạo nó khi điều kiện là true :

 renderInputField () {
    để đầu vào;
    
    if (this.state.mode! == 'view') {
      đầu vào =
        & lt; p & gt;
          & lt; đầu vào
            onChange = {this.handleChange}
            value = {this.state.inputText} / & gt;
        & lt; / p & gt ;;
    }
      
      trả lại đầu vào;
  }
  
  renderButton () {
    nút để cho;
    
    if (this.state.mode === 'view') {
      nút =
          & lt; nút onClick = {this.handleEdit} & gt;
            Chỉnh sửa
          & lt; / nút & gt ;;
    } khác {
      nút =
          & lt; nút onClick = {this.handleSave} & gt;
            Tiết kiệm
          & lt; / nút & gt ;;
    }
    
    nút quay lại;
  } 

Điều này cho kết quả giống như trả về null từ các phương thức đó. Đây là Fiddle để thử:

Xem Thêm  XSD hoạt động như thế nào trong XML với các Ví dụ? - áp dụng xsd vào xml

Phương thức render chính dễ đọc hơn theo cách này, nhưng có thể không cần sử dụng các khối if ... else (hoặc đại loại như câu lệnh switch ) và các phương thức kết xuất phụ. Hãy thử một cách tiếp cận đơn giản hơn.

4. Toán tử bậc ba trong React

Thay vì sử dụng khối if ... else , chúng ta có thể sử dụng toán tử điều kiện bậc ba :
điều kiện

? expr_if_true: expr_if_false 

Toán tử được bao bọc trong dấu ngoặc nhọn và các biểu thức có thể chứa JSX, tùy chọn được bao bọc trong dấu ngoặc đơn để cải thiện khả năng đọc. Nó cũng có thể được áp dụng trong các phần khác nhau của thành phần.

Hãy áp dụng nó vào ví dụ để bạn có thể thấy điều này trong thực tế. Tôi sẽ xóa renderInputField renderButton và trong phương thức render , tôi sẽ thêm một biến để biết liệu thành phần đang ở chế độ view hoặc edit :

 render () {
  const view = this.state.mode === 'view';

  trở về (
      & lt; div & gt;
      & lt; / div & gt;
  );
} 

Giờ đây, bạn có thể sử dụng toán tử bậc ba để trả về null nếu chế độ view được đặt hoặc trường nhập nếu không:

 // ...

  trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        
        {
          lượt xem
          ? vô giá trị
          : (
            & lt; p & gt;
              & lt; đầu vào
                onChange = {this.handleChange}
                value = {this.state.inputText} / & gt;
            & lt; / p & gt;
          )
        }

      & lt; / div & gt;
  ); 

Sử dụng toán tử bậc ba, bạn có thể khai báo một thành phần để hiển thị nút lưu hoặc chỉnh sửa bằng cách thay đổi trình xử lý và nhãn của nó tương ứng:

 // ...

  trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        
        {
          ...
        }

        nút & lt;
          onClick = {
            lượt xem
              ? this.handleEdit
              : this.handleSave
          } & gt;
              {lượt xem ? 'Chỉnh sửa': 'Lưu'}
        & lt; / nút & gt;

      & lt; / div & gt;
  ); 

Đây là Fiddle để thử:

Như đã đề cập trước đây, toán tử này có thể được áp dụng trong các phần khác nhau của thành phần, ngay cả bên trong các câu lệnh trả về và JSX, hoạt động như một câu lệnh if ... else một dòng. Tuy nhiên, chính xác vì lý do này, mọi thứ có thể trở nên lộn xộn nhanh chóng.

Hãy xem xét một kỹ thuật khác có thể giúp cải thiện mã.

5. Toán tử AND ngắn mạch ( & amp; & amp; )

Toán tử bậc ba có một trường hợp đặc biệt mà nó có thể được đơn giản hóa. Khi bạn muốn hiển thị thứ gì đó hoặc không có gì, bạn chỉ có thể sử dụng toán tử & amp; & amp; . Không giống như toán tử & amp; , & amp; & amp; không đánh giá biểu thức bên phải nếu chỉ đánh giá biểu thức bên trái mới có thể quyết định kết quả cuối cùng.

Ví dụ: nếu biểu thức đầu tiên được đánh giá là false ( false & amp; & amp;… ), thì không cần thiết phải đánh giá biểu thức tiếp theo vì kết quả sẽ luôn là false .

Trong React, bạn có thể có các biểu thức như sau:

 return (
    & lt; div & gt;
        {showHeader & amp; & amp; & lt; Tiêu đề / & gt; }
    & lt; / div & gt;
); 

Nếu showHeader đánh giá là true , thì thành phần & lt; Header / & gt; sẽ được trả về bởi biểu thức. Nếu showHeader đánh giá thành false , thì thành phần & lt; Header / & gt; sẽ bị bỏ qua và & lt; div & gt; < / code> sẽ được trả lại.

Theo cách này, biểu thức sau:

 {
  lượt xem
  ? vô giá trị
  : (
    & lt; p & gt;
      & lt; đầu vào
        onChange = {this.handleChange}
        value = {this.state.inputText} / & gt;
    & lt; / p & gt;
  )
} 

Có thể được chuyển thành:

! view & amp; & amp; (
  & lt; p & gt;
    & lt; đầu vào
      onChange = {this.handleChange}
      value = {this.state.inputText} / & gt;
  & lt; / p & gt;
) 

Đây là Fiddle hoàn chỉnh:

Trông đẹp hơn, phải không?

Tuy nhiên, toán tử bậc ba không phải lúc nào cũng đẹp hơn. Hãy xem xét một tập hợp các điều kiện lồng nhau, phức tạp:

 return (
  & lt; div & gt;
    {điều kiện1
      ? & lt; Thành phần1 / & gt;
      : (điều kiện2
        ? & lt; Thành phần2 / & gt;
        : (điều kiện3
          ? & lt; Thành phần3 / & gt;
          : & lt; Thành phần 4 / & gt;
        )
      )
    }
  & lt; / div & gt;
); 

Điều này có thể trở thành một mớ hỗn độn khá nhanh chóng. Vì lý do đó, đôi khi bạn có thể muốn sử dụng các kỹ thuật khác, chẳng hạn như các hàm được gọi ngay lập tức.

6. Biểu thức hàm được gọi ngay lập tức (IIFEs)

Như tên của nó, biểu thức hàm được gọi ngay lập tức (IIFE) là các hàm được thực thi ngay sau khi chúng được xác định - không cần gọi chúng một cách rõ ràng.

Nói chung, đây là cách bạn xác định và thực thi (sau này) một hàm:

 function myFunction () {

// ...

}

myFunction (); 

Nhưng nếu bạn muốn thực thi hàm ngay sau khi nó được định nghĩa, bạn phải đặt toàn bộ khai báo trong dấu ngoặc đơn (để chuyển nó thành một biểu thức) và thực thi nó bằng cách thêm hai dấu ngoặc đơn nữa (chuyển bất kỳ đối số nào mà hàm có thể nhận ).

Hoặc theo cách này:

 (hàm myFunction (/ * đối số * /) {
    // ...
} (/ * đối số * /)); 

Hoặc theo cách này:

 (hàm myFunction (/ * đối số * /) {
    // ...
}) (/ * đối số * /); 

Vì hàm sẽ không được gọi ở bất kỳ nơi nào khác, bạn có thể bỏ tên:

 (hàm (/ * đối số * /) {
    // ...
}) (/ * đối số * /); 

Hoặc bạn cũng có thể sử dụng các hàm mũi tên:

 ((/ * đối số * /) = & gt; {
    // ...
}) (/ * đối số * /); 

Trong React, bạn sử dụng dấu ngoặc nhọn để bọc IIFE, đặt tất cả logic bạn muốn vào bên trong nó ( if ... else , switch , toán tử bậc ba, v.v. .) và trả lại bất kỳ thứ gì bạn muốn hiển thị.

Nói cách khác, bên trong IIFE, chúng ta có thể sử dụng bất kỳ loại logic điều kiện nào. Điều này cho phép chúng tôi sử dụng các câu lệnh if ... else switch bên trong các câu lệnh return và JSX nếu bạn cho rằng nó để cải thiện khả năng đọc của mã .

 return (
  & lt; div & gt;
    & lt; p & gt; ... & lt; / p & gt;
    {
      (() = & gt; {
        chuyển đổi (điều kiện) {
          trường hợp 1: return & lt; Component1 / & gt ;;
          trường hợp 2: return & lt; Component2 / & gt ;;
          mặc định: null;
        }
      }) ()
     }
  & lt; / div & gt;
);

Ví dụ: đây là cách logic để hiển thị nút lưu / chỉnh sửa có thể trông như thế nào với IIFE:

 {
  (() = & gt; {
    const handler = view
                ? this.handleEdit
                : this.handleSave;
    const label = xem? 'Chỉnh sửa': 'Lưu';
          
    trở về (
      & lt; nút onClick = {handler} & gt;
        {nhãn mác}
      & lt; / nút & gt;
    );
  }) ()
} 

Đây là Fiddle hoàn chỉnh:

7. Phản ứng các thành phần con

Đôi khi, IFFE có vẻ giống như một giải pháp khó hiểu. Sau cùng, chúng tôi đang sử dụng React - các phương pháp được đề xuất là chia logic ứng dụng của bạn thành nhiều thành phần nhất có thể và sử dụng lập trình chức năng thay vì lập trình bắt buộc.

Vì vậy, chuyển logic kết xuất có điều kiện sang thành phần con hiển thị những thứ khác nhau dựa trên các đạo cụ của nó sẽ là một lựa chọn tốt. Nhưng ở đây, tôi sẽ làm điều gì đó hơi khác một chút để cho bạn thấy cách bạn có thể chuyển từ một giải pháp cấp thiết sang các giải pháp chức năng và khai báo hơn.

Tôi sẽ bắt đầu bằng cách tạo SaveComponent :

 const SaveComponent = (props) = & gt; {
  trở về (
    & lt; div & gt;
      & lt; p & gt;
        & lt; đầu vào
          onChange = {props.handleChange}
          value = {props.text}
        / & gt;
      & lt; / p & gt;
      & lt; nút onClick = {props.handleSave} & gt;
        Tiết kiệm
      & lt; / nút & gt;
    & lt; / div & gt;
  );
}; 

Là thuộc tính, nó nhận mọi thứ cần thiết để hoạt động. Theo cách tương tự, có một EditComponent :

 const EditComponent = (props) = & gt; {
  trở về (
    & lt; nút onClick = {props.handleEdit} & gt;
      Chỉnh sửa
    & lt; / nút & gt;
  );
}; 

Bây giờ, phương thức render có thể trông giống như sau:

 render () {
    const view = this.state.mode === 'view';
    
    trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        
        {
          lượt xem
            ? & lt; EditComponent handleEdit = {this.handleEdit} / & gt;
            : (
              & lt; SaveComponent
               handleChange = {this.handleChange}
               handleSave = {this.handleSave}
               text = {this.state.inputText}
             / & gt;
            )
        }
      & lt; / div & gt;
    );
} 

Đây là Fiddle hoàn chỉnh:

Các thành phần

If

Có những thư viện như jsx-control-statement mở rộng JSX để thêm các câu lệnh có điều kiện như:

 & lt; If condition = {a === 1} & gt;
  & lt; span & gt; Xin chào! & lt; / span & gt;
& lt; / Nếu & gt; 

Thư viện này thực sự là một plugin Babel, vì vậy đoạn mã trên được dịch thành:

 {
  a === 1? & lt; span & gt; Xin chào! & lt; / span & gt; : vô giá trị;
}

Hoặc thẻ Choose , được sử dụng cho các câu lệnh điều kiện phức tạp hơn:

 & lt; Chọn & gt;
  & lt; Khi điều kiện = {a === 1} & gt;
    & lt; span & gt; Một & lt; / span & gt;
  & lt; / Khi nào & gt;
  & lt; Khi điều kiện = {a === 2} & gt;
    & lt; span & gt; Hai & lt; / span & gt;
  & lt; / Khi nào & gt;
  & lt; Ngược lại & gt;
    & lt; span & gt; Mặc định & lt; / span & gt;
  & lt; / Nếu không & gt;
& lt; / Chọn & gt;

Ở trên dịch thành:

 {
  a === 1? (
    & lt; span & gt; Một & lt; / span & gt;
  ): a === 2? (
    & lt; span & gt; Hai & lt; / span & gt;
  ): (
    & lt; span & gt; Mặc định & lt; / span & gt;
  );
}

Các thư viện này cung cấp các thành phần nâng cao hơn, nhưng nếu chúng ta cần một thứ gì đó đơn giản như if ... else , chúng ta có thể sử dụng giải pháp tương tự như Michael J. Ryan's trong nhận xét cho sự cố :

 const If = (props) = & gt; {
  const condition = props.condition || sai;
  const positive = props.then || vô giá trị;
  const negative = props.else || vô giá trị;
  
  điều kiện trả lại? positive: âm tính;
};

//…

kết xuất () {
    const view = this.state.mode === 'view';
    const editComponent = & lt; EditComponent handleEdit = {this.handleEdit} / & gt ;;
    const saveComponent = & lt; SaveComponent
               handleChange = {this.handleChange}
               handleSave = {this.handleSave}
               text = {this.state.inputText}
             / & gt ;;
    
    trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        & lt; Nếu
          điều kiện = {view}
          thì = {editComponent}
          else = {saveComponent}
        / & gt;
      & lt; / div & gt;
    );
} 

Đây là Fiddle hoàn chỉnh:

8. Thêm đối tượng

Giờ đây, chức năng lưu / chỉnh sửa được gói gọn trong hai thành phần, chúng tôi cũng có thể sử dụng các đối tượng enum để hiển thị một trong số chúng, tùy thuộc vào trạng thái của ứng dụng.

Enum là một kiểu nhóm các giá trị không đổi. Ví dụ: đây là cách bạn xác định một trong TypeScript:

 enum State {
  Save = "Một số giá trị",
  Edit = "Một giá trị khác"
}

JavaScript không hỗ trợ enum nguyên bản, nhưng chúng ta có thể sử dụng một đối tượng để nhóm tất cả các thuộc tính của enum và đóng băng đối tượng đó để tránh những thay đổi ngẫu nhiên.

 const State = Object.freeze ({
  Lưu: "Một số giá trị",
  Chỉnh sửa: "Giá trị khác"
});

Tại sao không chỉ sử dụng hằng số? Chà, lợi ích chính là chúng ta có thể sử dụng một khóa được tạo động để truy cập thuộc tính của đối tượng.

 const key = condition? "Lưu": "Chỉnh sửa":
const state = State [khóa];

Áp dụng điều này vào ví dụ của chúng tôi, chúng tôi có thể khai báo một đối tượng enum với hai thành phần để lưu và chỉnh sửa:

 const Components = Object.freeze ({
  chế độ xem: & lt; EditComponent handleEdit = {this.handleEdit} / & gt ;,
  chỉnh sửa: & lt; SaveComponent
          handleChange = {this.handleChange}
          handleSave = {this.handleSave}
          text = {this.state.inputText}
        / & gt;
});

Và sử dụng biến trạng thái mode để cho biết thành phần nào sẽ hiển thị.

 const key = this.state.mode;
trở về (
  & lt; div & gt;
    & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
    {
      Thành phần [key]
    }
  & lt; / div & gt;
);

Bạn có thể xem toàn bộ mã trong trò chơi sau:

JSFiddle

Kiểm tra trực tuyến JavaScript, CSS, HTML hoặc CoffeeScript của bạn bằng trình chỉnh sửa mã JSFiddle.

https://jsfiddle.net/eh3rrera/7ey56xud/embedded

Đối tượng enum là một tùy chọn tuyệt vời khi bạn muốn sử dụng hoặc trả về một giá trị dựa trên nhiều điều kiện, làm cho chúng thay thế tuyệt vời cho if ... else switch trong nhiều trường hợp.

9. Các thành phần bậc cao (HOC) trong React

Một thành phần bậc cao hơn (HOC) là một hàm lấy một thành phần hiện có và trả về một thành phần mới với một số chức năng được bổ sung:

 const EnhancedComponent = highOrderComponent (thành phần); 

Được áp dụng cho kết xuất có điều kiện, HOC có thể trả về một thành phần khác với thành phần được truyền dựa trên một số điều kiện:

 chức năng cao hơnOrderComponent (Thành phần) {
  chức năng trả về EnhancedComponent (đạo cụ) {
    if (điều kiện) {
      trả lại & lt; AnotherComponent {... props} / & gt ;;
    }

    return & lt; Thành phần {... props} / & gt ;;
  };
} 

Có một bài viết xuất sắc về HOCs của Robin Wieruch được đào đi sâu hơn vào kết xuất có điều kiện với các thành phần bậc cao hơn. Đối với bài viết này, tôi sẽ mượn các khái niệm của EitherComponent .

Trong lập trình chức năng, loại Either thường được sử dụng làm trình bao bọc để trả về hai giá trị khác nhau. Vì vậy, hãy bắt đầu bằng cách xác định một hàm nhận hai đối số, một hàm khác sẽ trả về giá trị Boolean (kết quả của đánh giá có điều kiện) và thành phần sẽ được trả về nếu giá trị đó là true : < / p>
Hàm

 withEither (conditionRenderingFn, EitherComponent) {

} 

Quy ước bắt đầu tên của HOC bằng từ với . Hàm này sẽ trả về một hàm khác sẽ lấy thành phần ban đầu để trả về một thành phần mới:

Hàm

 withEither (conditionRenderingFn, EitherComponent) {
    trả về hàm buildNewComponent (Thành phần) {

    }
} 

Thành phần (chức năng) được trả về bởi hàm bên trong này sẽ là thành phần bạn sẽ sử dụng trong ứng dụng của mình, vì vậy, nó sẽ nhận một đối tượng có tất cả các thuộc tính mà nó sẽ cần để hoạt động:

Hàm

 withEither (conditionRenderingFn, EitherComponent) {
    trả về hàm buildNewComponent (Thành phần) {
        hàm trả về FinalComponent (đạo cụ) {

        }
    }
} 

Các hàm bên trong có quyền truy cập vào các tham số của hàm bên ngoài, vì vậy, bây giờ, dựa trên giá trị được trả về bởi hàm conditionRenderingFn , bạn có thể trả về EitherComponent hoặc giá trị gốc Thành phần :

Hàm

 withEither (conditionRenderingFn, EitherComponent) {
    trả về hàm buildNewComponent (Thành phần) {
        hàm trả về FinalComponent (đạo cụ) {
            trả về điều kiệnRenderingFn (đạo cụ)
                ? & lt; EitherComponent {... props} / & gt;
                 : & lt; Thành phần {... props} / & gt ;;
        }
    }
} 

Hoặc, sử dụng các hàm mũi tên:

 const withEither = (conditionRenderingFn, EitherComponent) = & gt; (Thành phần) = & gt; (đạo cụ) = & gt;
  conditionRenderingFn (đạo cụ)
    ? & lt; EitherComponent {... props} / & gt;
    : & lt; Thành phần {... props} / & gt ;; 

Bằng cách này, bằng cách sử dụng SaveComponent EditComponent được xác định trước đó, bạn có thể tạo một withEditConditionalRendering HOC và bằng cách này, tạo một Thành phần EditSaveWithConditionalRendering :

 const isViewConditionFn = (props) = & gt; props.mode === 'view';

const withEditContionalRendering = withEither (isViewConditionFn, EditComponent);
const EditSaveWithConditionalRendering = withEditContionalRendering (SaveComponent); 

Giờ đây, bạn có thể sử dụng nó trong phương thức render , chuyển tất cả các thuộc tính cần thiết:

 render () {
    trở về (
      & lt; div & gt;
        & lt; p & gt; Văn bản: {this.state.text} & lt; / p & gt;
        & lt; EditSaveWithConditionalRendering
               mode = {this.state.mode}
               handleEdit = {this.handleEdit}
               handleChange = {this.handleChange}
               handleSave = {this.handleSave}
               text = {this.state.inputText}
             / & gt;
      & lt; / div & gt;
    );
} 

Đây là Fiddle hoàn chỉnh:

Kết xuất có điều kiện trong React: Cân nhắc về hiệu suất

Kết xuất có điều kiện có thể khó khăn. Như tôi đã chỉ cho bạn trước đây, hiệu suất của mỗi tùy chọn có thể khác nhau. Tuy nhiên, hầu hết thời gian, sự khác biệt không quan trọng nhiều.

Nhưng khi làm như vậy, bạn sẽ cần hiểu rõ về cách React hoạt động với DOM ảo và một vài thủ thuật để tối ưu hóa hiệu suất . Đây là một bài viết hay về tối ưu hóa hiển thị có điều kiện trong React - Tôi thực sự khuyên bạn nên đọc.

Ý tưởng cơ bản là việc thay đổi vị trí của các thành phần do hiển thị có điều kiện có thể gây ra chỉnh lại sẽ ngắt kết nối / gắn kết các thành phần của ứng dụng. Dựa trên ví dụ của bài viết, tôi đã tạo hai JSFiddles.

Cái đầu tiên sử dụng khối if ... else để hiển thị / ẩn thành phần SubHeader :

Cái thứ hai sử dụng toán tử ngắn mạch ( & amp; & amp;) để làm tương tự:

Mở Trình kiểm tra và nhấp vào nút một vài lần. Bạn sẽ thấy cách thành phần Nội dung được xử lý khác nhau theo từng cách triển khai.

Đây là cách khối if ... else xử lý thành phần:

Hoạt ảnh cho thấy cách khối if / else xử lý thành phần nội dung

 Hoạt ảnh Hiển thị cách nếu / else Khối xử lý Thành phần nội dung

Và đây là cách người vận hành ngắn mạch thực hiện:

Hoạt ảnh cho thấy cách nhà điều hành mạch ngắn xử lý thành phần nội dung

 Hoạt ảnh cho thấy cách đi ngắn -Nhà điều hành mạch xử lý thành phần nội dung

Kết xuất có điều kiện với các mảnh

Làm cách nào để hiển thị nhiều thành phần con tùy thuộc vào một điều kiện nhất định? Câu trả lời là bằng cách sử dụng phân đoạn .

Các phân đoạn cho phép bạn trả về nhiều phần tử bằng cách nhóm chúng mà không cần thêm một nút bổ sung vào mô hình đối tượng tài liệu (DOM).

Bạn có thể sử dụng các phân đoạn với cú pháp truyền thống của chúng:

 return (
  & lt; React.Fragment & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
  & lt; /React.Fragment>
);

Hoặc với cú pháp ngắn gọn của chúng:

 return (
  & lt; & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
  & lt; / & gt;
);

Điều đó có nghĩa là khi kết xuất nhiều phần tử với các phân đoạn tùy thuộc vào điều kiện, bạn có thể sử dụng bất kỳ kỹ thuật nào được mô tả trong bài viết này.

Ví dụ: bạn có thể sử dụng toán tử bậc ba theo cách này:

 {
  lượt xem
  ? vô giá trị
  : (
    & lt; React.Fragment & gt;
      & lt; Nút / & gt;
      & lt; Nút / & gt;
      & lt; Nút / & gt;
    & lt; /React.Fragment>
  )
}

Tốt hơn, bạn có thể sử dụng & amp; & amp; :

 {
  điều kiện & amp; & amp;
  & lt; React.Fragment & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
    & lt; Nút / & gt;
  & lt; /React.Fragment>
}

Bạn cũng có thể đóng gói việc hiển thị các phần tử con trong một phương thức và sử dụng câu lệnh if hoặc switch để quyết định trả về cái gì:

 render () {
  trả về & lt; div & gt; {this.renderChildren ()} & lt; / div & gt ;;
}

renderChildren () {
  if (this.state.children.length === 0) {
    trả về & lt; p & gt; Không có gì để hiển thị & lt; / p & gt ;;
  } khác {
    trở về (
      & lt; React.Fragment & gt;
        {this.state.children.map (con = & gt; (
          & lt; p & gt; {con} & lt; / p & gt;
        ))}
      & lt; /React.Fragment>
    );
 }
}

Kết xuất có điều kiện với React Hooks

Ngày nay, hầu hết các nhà phát triển React có kinh nghiệm sử dụng Hooks để viết các thành phần. Vì vậy, thay vì có một lớp học như thế này:

 nhập React, {Thành phần} từ 'react';

class Doubler mở rộng Thành phần {
  hàm tạo (đạo cụ) {
    siêu (đạo cụ);

    this.state = {
      num: 1,
    };
  }

  kết xuất () {
    trở về (
      & lt; div & gt;
        & lt; p & gt; {this.state.num} & lt; / p & gt;
        & lt; nút onClick = {() = & gt;
            this.setState ({num: this.state.num * 2})
        } & gt;
          Kép
        & lt; / nút & gt;
      & lt; / div & gt;
    );
  }
}

Bạn có thể sử dụng hook useState để viết thành phần có hàm:

 nhập React từ 'react';

function Doubler () {
  const [num, setNum] = React.useState (1);

  trở về (
    & lt; div & gt;
      & lt; p & gt; {num} & lt; / p & gt;
      & lt; nút onClick = {() = & gt; setNum (num * 2)} & gt;
        Kép
      & lt; / nút & gt;
    & lt; / div & gt;
  );
}

Cũng giống như các đoạn mảnh, bạn có thể sử dụng bất kỳ kỹ thuật nào được mô tả trong bài viết này để hiển thị có điều kiện một thành phần sử dụng Móc.

 function Doubler () {
  const [num, setNum] = React.useState (1);
  const showButton = num & lt; = 8;
  nút const = & lt; nút onClick = {() = & gt; setNum (num * 2)} & gt; Double & lt; / button & gt ;;

  trở về (
    & lt; div & gt;
      & lt; p & gt; {num} & lt; / p & gt;
      {showButton & amp; & amp; cái nút}
    & lt; / div & gt;
  );
}

Cảnh báo duy nhất là bạn không thể gọi một Hook một cách có điều kiện nên không phải lúc nào nó cũng được thực thi. Theo tài liệu Hooks:

Không gọi các Hook bên trong các vòng lặp, điều kiện hoặc các hàm lồng nhau. Thay vào đó, hãy luôn sử dụng Hook ở cấp cao nhất của hàm React. Bằng cách tuân theo quy tắc này, bạn đảm bảo rằng các Hook được gọi theo thứ tự giống nhau mỗi khi một thành phần hiển thị. Đó là điều cho phép React duy trì chính xác trạng thái Hooks giữa nhiều lệnh gọi useState useEffect .

Điều này thường xảy ra với móc useEffect . Bạn không thể đặt một điều kiện có thể ngăn hook được gọi mỗi khi thành phần được hiển thị, như sau:

 if (shouldExecute) {
  useEffect (() = & gt; {
    // ...
  }
}

Bạn phải đặt điều kiện bên trong Hook:

 useEffect (() = & gt; {
  if (shouldExecute) {
    // ...
  }
}, [shouldExecute])

Cách tốt nhất để triển khai hiển thị có điều kiện trong React là gì?

Cũng như nhiều thứ trong lập trình, có nhiều cách để triển khai kết xuất có điều kiện trong React. Tôi muốn nói rằng, ngoại trừ phương thức đầu tiên ( if ... else có nhiều kết quả trả về), bạn có thể tự do chọn bất kỳ phương thức nào mình muốn.

Bạn có thể quyết định cái nào phù hợp nhất với tình huống của mình dựa trên:

  • Phong cách lập trình của bạn
  • Mức độ phức tạp của logic điều kiện
  • Bạn cảm thấy thoải mái như thế nào với JavaScript, JSX và các khái niệm React nâng cao (như HOC)

Và, tất cả mọi thứ đều bình đẳng, luôn ưu tiên sự đơn giản và dễ đọc.

Đảm bảo các thành phần hiển thị trong quá trình sản xuất

Gỡ lỗi các ứng dụng React có thể khó khăn, đặc biệt là khi có trạng thái phức tạp. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux cho tất cả người dùng của mình trong quá trình sản xuất, hãy hãy thử LogRocket .

LogRocket giống như một DVR cho các ứng dụng web, ghi lại mọi thứ diễn ra trên trang web của bạn theo đúng nghĩa đen. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về trạng thái ứng dụng của bạn đang ở trạng thái nào khi sự cố xảy ra.

Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn.

Hiện đại hóa cách bạn gỡ lỗi ứng dụng React của mình - .

Chia sẻ cái này:


Xem thêm những thông tin liên quan đến chủ đề kết xuất có điều kiện trong js phản ứng

Learn React #7: Conditional Rendering (&& and Ternary)

alt

  • Tác giả: Anthony Sistilli
  • Ngày đăng: 2020-10-04
  • Đánh giá: 4 ⭐ ( 1399 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video we go over:
    0:00 - What is conditional rendering?
    1:00 - Some basic examples from React's documentation (https://reactjs.org/docs/conditional-rendering.html)
    2:00 - The logical && operator in Javascript & React
    3:25 - Our own example application with the && logical operator
    5:25 - Example with .length
    6:45 - Quiz
    7:35 - Chaining a second logical && operator in a single check in React JSX
    9:10 - Using the && Operator for variables as well
    10:25 - Ternary Operator in React and JSX
    12:45 - Complex example with Ternary and state variables

    Code Sandbox link: https://codesandbox.io/s/wild-lake-yr3iz?file=/src/App.js

    The Forge Coding Tutorials...http://theforge.ca\r
    Follow me on Social Media:\r
    https://www.linkedin.com/in/asistilli/\r
    https://www.tiktok.com/@anthonysistilli\r
    https://www.instagram.com/asistilli/

[Tự học Javascript] Toán tử điều kiện: if, ‘?’ trong Javascript

  • Tác giả: cafedev.vn
  • Đánh giá: 4 ⭐ ( 5902 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đôi khi, chúng ta cần thực hiện các hành động khác nhau dựa trên các điều kiện khác nhau.Để làm điều đó, chúng ta có thể sử dụng ifcâu lệnh và toán tử có điều kiện ?, đó cũng được gọi là toán tử đánh dấu hỏi.

Toán tử trong JavaScript

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 3069 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Toán tử trong JavaScript - Học Javascript cơ bản và nâng cao cho người mới học từ Cú pháp Đối tượng Syntax Objects Form Validations Cookies Regular Expressions Literals Biến Hàm Phương thức Variables Vòng lặp Loops Điều kiện Conditions.

Câu lệnh điều kiện trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 7265 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Câu lệnh if-else trong javascript cũng giống như các ngôn ngữ khác, nếu điều kiện của mệnh đề đúng thì code phía trong sẽ được thực hiện, và ngược lại nếu sai thì nó sẽ không chạy code trong mệnh đề.

Biểu thức điều kiện trong Javascript

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4046 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Biểu thức điều kiện là một trong những khía cạnh rất quan trong trong mọi ngôn ngữ lập trình. Chúng ta đã quen với các mệnh đề điều kiện như if..elif..else hay switch. Chúng là những cú pháp hữu dụng...

Câu lệnh điều kiện IF trong JavaScript

  • Tác giả: kenh49.vn
  • Đánh giá: 4 ⭐ ( 5795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cùng tìm hiểu về câu lệnh điều kiện If Else trong JavaScrip về cấu trúc, khi nào sẽ dụng qua những ví dụ thực tế được Kênh 49 hướng dẫn trình bày trong bài

Cấu trúc điều kiện trong JavaScript

  • Tác giả: websitehcm.com
  • Đánh giá: 4 ⭐ ( 4800 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cấu trúc điều kiện trong JavaScript w3seo tìm hiểu về if, else, switch,... trong JavaScript, điều khiện trong JavaScript

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình