Hướng dẫn react variable in html attribute - biến phản ứng trong thuộc tính html

Question

Tôi đang cố gắng để có được dòng sau

Nội dung chính Show

1 render() { const rel = "rel='nofollow'"; return (

); } 9 là một văn bản.
2 render() { const rel = "rel='nofollow'"; return (

); } 9 là một đối tượng.
Thử nghiệm
Để truy cập đối tượng từ chức năng sự kiện, xem bên dưới.
Tôi hy vọng hướng dẫn này giúp bạn thực hiện nhiều cách khác nhau để cung cấp giá trị cho một thuộc tính.
Chuyển các giá trị động cho một thuộc tính
Chuyển các giá trị cho một thuộc tính sự kiện
Sự kết luận
Làm thế nào để bạn sử dụng một biến trong thuộc tính trong React?
React có hỗ trợ tất cả các thuộc tính HTML không?
Bạn có thể sử dụng các thành phần React trong HTML không?
Tôi có thể sử dụng var trong React không?

Lưu ý rel = 'nofollow'rel='nofollow'

Trong phương thức kết xuất của thành phần React của tôi, tôi có cú pháp JSX này:

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

Tôi nhận được một: Lỗi: /~/scripts/navulation.jsx: Mã thông báo bất ngờ, dự kiến "..."

Tôi cũng đã thử với

let rel = { __html: "Hey" };

và

Điều này cũng thất bại nhưng dù sao nguy hiểmTherSetInnerHTML được cho là tiêm một số thứ giữa thẻ mở và đóng không nằm trong thuộc tính của thẻ.

Điều gì sẽ là cú pháp JSX chính xác để thực hiện điều đó?

Đã hỏi ngày 14 tháng 5 năm 2019 lúc 15:31May 14, 2019 at 15:31

2

Trước tiên bạn phải quyết định "hình dạng" của giá trị

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

9 của bạn là gì. Nó sẽ là một văn bản? Hay nó sẽ là một đối tượng?

1 render() { const rel = "rel='nofollow'"; return (

); } 9 là một văn bản.

Nếu

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

9 được truyền dưới dạng văn bản thô, chẳng hạn như

let rel = { __html: "Hey" };

2, bạn sẽ phải gán thuộc tính

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

9 theo cách thủ công.

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

2 render() { const rel = "rel='nofollow'"; return (

); } 9 là một đối tượng.

Nếu

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

9 được truyền như một đối tượng, chẳng hạn như

let rel = { __html: "Hey" };

6, thì bạn chỉ cần chuyển đối tượng đến phần tử neo.

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    
      Bing
    
  );
}

Bạn có thể thấy rằng cả hai sẽ thêm thuộc tính

let rel = { __html: "Hey" };

7.

Hướng dẫn react variable in html attribute - biến phản ứng trong thuộc tính html

Thử nghiệm

Bạn có thể theo dõi trên CodeSandBox.

Đã trả lời ngày 14 tháng 5 năm 2019 lúc 15:47May 14, 2019 at 15:47

dance2diedance2diedance2die

34,7K36 Huy hiệu vàng129 Huy hiệu bạc192 Huy hiệu Đồng36 gold badges129 silver badges192 bronze badges

  render() {
  const theRel = "nofollow";
  return (
    
      
    

  );
}

Đã trả lời ngày 14 tháng 5 năm 2019 lúc 15:37May 14, 2019 at 15:37

Amir-MousaviAmir-MousaviAmir-Mousavi

3.73110 Huy hiệu vàng55 Huy hiệu bạc110 Huy hiệu Đồng10 gold badges55 silver badges110 bronze badges

Bạn có thể đặt

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

9 như thế này:

render() {
  const rel = "nofollow";
  return (
    
      Hey
    
  );
}

Đã trả lời ngày 14 tháng 5 năm 2019 lúc 15:38May 14, 2019 at 15:38

Gerganagerganagergana

6415 Huy hiệu bạc9 Huy hiệu Đồng5 silver badges9 bronze badges

Để truy cập đối tượng từ chức năng sự kiện, xem bên dưới.

Bạn có thể chuyển bất kỳ giá trị tĩnh hoặc động cùng với chức năng sự kiện, giống như trong ví dụ trên.

Sự kết luận

Các thuộc tính đóng một vai trò thiết yếu khi sử dụng các phần tử HTML có giá trị tĩnh hoặc động để đạt được kết quả tương tác.

Tôi hy vọng hướng dẫn này giúp bạn thực hiện nhiều cách khác nhau để cung cấp giá trị cho một thuộc tính.

Làm thế nào để bạn sử dụng một biến trong thuộc tính trong React?

Tạo một biến trạng thái với giá trị mặc định. Bây giờ tạo phần tử cùng với các thuộc tính cần thiết. Trong ví dụ trên, các đạo cụ thay đổi trò chơi là onchange (), được sử dụng để cập nhật giá trị hiện có với giá trị được cập nhật.

React có hỗ trợ tất cả các thuộc tính HTML không?

let rel = { __html: "Hey" };

9 element in your React component, and the URL is stored in a state variable, as shown below.

1constructor() {
2    super();
3    this.state = {
4      imageUrl: "your_image_url",
5    };
6}

JSX

Bạn cần đặt một biến trạng thái bên trong trạng thái cục bộ của thành phần

0, nơi bạn có thể đặt một đường dẫn hoặc URL thích hợp của hình ảnh.

0, where you can put an appropriate path or URL of the image.

Biến trạng thái có thể được tiêu thụ trực tiếp với phần tử, như hình dưới đây.

1render() {
2    console.log(this.props)
3    return (
4      <div>
5        <img src={this.state.imageUrl} />
6      div>
7    );
8}

JSX

Như bạn có thể thấy,

1 được truy cập từ tiểu bang địa phương; Do đó, nó được gọi là giá trị động cho thuộc tính

2 và

3 là giá trị tĩnh.

1 is accessed from the local state; hence, it’s called dynamic value to the

2 attribute and the

3 as a static value.

Theo cách tương tự, nó cũng có thể được áp dụng cho các yếu tố khác nhau và một vài ví dụ được hiển thị bên dưới.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

0

JSX

Cùng với thuộc tính

4, giá trị tĩnh được sử dụng là

5 và với điều khiển

6,

7 được sử dụng làm giá trị tĩnh cho thuộc tính.

4 attribute, the static value used is

5, and with the

6 control,

7 is used as a static value to the attribute.

Chuyển các giá trị động cho một thuộc tính

Cho đến nay trong hướng dẫn này, bạn đã học được cách chuyển các giá trị tĩnh cho một thuộc tính. Nhưng điều đó có thể yêu cầu bạn sử dụng các giá trị thay đổi thường xuyên cùng với thuộc tính.

Ví dụ: bạn có thể có một đầu vào văn bản và phần tử của nó cập nhật giá trị khi bạn thay đổi giá trị của nó. Ví dụ dưới đây cho thấy điều này.

Tạo một biến trạng thái với giá trị mặc định.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

1

JSX

Bây giờ tạo phần tử

6 cùng với các thuộc tính cần thiết.

6 element along with the required attributes.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

2

JSX

Trong ví dụ trên, các đạo cụ thay đổi trò chơi là

9, được sử dụng để cập nhật giá trị hiện có với giá trị được cập nhật.

9, used to update the existing value with the updated value.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

3

JSX

Vì vậy, một khi bạn cập nhật giá trị hiện có trong điều khiển đầu vào, nó sẽ được cập nhật vào trạng thái và cùng một giá trị sẽ xuất hiện trong điều khiển đầu vào bằng cách sử dụng các đạo cụ, như được hiển thị bên dưới.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

4

JSX

Bằng cách tiêu thụ và cập nhật các giá trị trạng thái khác nhau, bạn có thể cung cấp các giá trị động cho thuộc tính phần tử.

Chuyển các giá trị cho một thuộc tính sự kiện

Các sự kiện rất tiện dụng khi cần có tương tác người dùng trong trang hiện có; Do đó, các giá trị cũng có thể được truyền đến một thuộc tính sự kiện như với các thuộc tính được xây dựng của các phần tử, chẳng hạn như

2,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

1,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

2,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

3,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

4, v.v.

2,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

1,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

2,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

3,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

4, and so on.

Bạn có thể xác định các giá trị ở bất cứ đâu, chẳng hạn như trạng thái cục bộ trong các thành phần, để truyền các giá trị đến thuộc tính sự kiện. Xem bên dưới.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

5

JSX

Bên trong đối tượng trạng thái của thành phần,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

5 là một đối tượng tùy chỉnh được tạo cùng với cặp giá trị khóa.

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

5 is a custom object created along with the key-value pair.

Bước tiếp theo là triển khai thuộc tính sự kiện, chẳng hạn như

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

6.

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

6.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

6

JSX

Bên trong

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

7, có một phần tử được tạo,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

8, cùng với thuộc tính sự kiện, được gọi là

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

9, kích hoạt sự kiện khi người dùng nhấp vào phần tử nhịp.

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

7, there is one element created,

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

8, along with the event attribute, called

function LinkWithPropertyAssignment() {
  const rel = "nofollow";

  return (
    
      Google
    
  );
}

9, which triggers the event when the user clicks on the span element.

Khi người dùng nhấp vào phần tử, bạn có thể chuyển bất kỳ giá trị tùy chỉnh nào dưới dạng đối số hàm.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

7

JSX

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    
      Bing
    
  );
}

0 là một hàm tùy chỉnh chấp nhận một đối số và đối số tĩnh được đưa ra là

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    
      Bing
    
  );
}

1. is a custom function that accepts one argument, and the static argument given is

function LinkWithObjectSpread() {
  const rel = { rel: "nofollow" };

  return (
    
      Bing
    
  );
}

1.

Để truy cập đối tượng từ chức năng sự kiện, xem bên dưới.

render() {
  const rel = "rel='nofollow'";
  return (
    
      
    

  );
}

8

JSX

Bạn có thể chuyển bất kỳ giá trị tĩnh hoặc động cùng với chức năng sự kiện, giống như trong ví dụ trên.

Sự kết luận

Các thuộc tính đóng một vai trò thiết yếu khi sử dụng các phần tử HTML có giá trị tĩnh hoặc động để đạt được kết quả tương tác.

Tôi hy vọng hướng dẫn này giúp bạn thực hiện nhiều cách khác nhau để cung cấp giá trị cho một thuộc tính.

Hướng dẫn react variable in html attribute - biến phản ứng trong thuộc tính html

2 render() { const rel = "rel='nofollow'"; return ( ); } 9 là một đối tượng.

Thử nghiệm

Để truy cập đối tượng từ chức năng sự kiện, xem bên dưới.

Tôi hy vọng hướng dẫn này giúp bạn thực hiện nhiều cách khác nhau để cung cấp giá trị cho một thuộc tính.

Chuyển các giá trị động cho một thuộc tính

Chuyển các giá trị cho một thuộc tính sự kiện

Sự kết luận

Làm thế nào để bạn sử dụng một biến trong thuộc tính trong React?

React có hỗ trợ tất cả các thuộc tính HTML không?

Bạn có thể sử dụng các thành phần React trong HTML không?

Tôi có thể sử dụng var trong React không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

2 render() { const rel = "rel='nofollow'"; return (

); } 9 là một đối tượng.