Hướng dẫn react print variable in html - biến in phản ứng trong html

Tôi đang học một khung bảng điều khiển quản trị phụ trợ được gọi là quản trị viên. Vì vậy, về cơ bản tôi đang cố gắng tạo ra một thành phần công cụ. Và đây là mã tôi đã thử cho đến bây giờ.

class Textbox extends React.PureComponent {
 

render() {
    const { property } = this.props;
    
    const ob = this.props.property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
       
    return (
        
    )
  }
}

export default withTheme(Textbox)

Trong ob này có các giá trị như thứ nhất, thứ hai, thứ ba và thứ tư, vì vậy khi nó là sentence[ob], nó có nghĩa là câu [thứ nhất] chữ'. Tôi đã an ủi đã đăng nhập line và thấy rằng phần này đang hoạt động hoàn hảo.

Bây giờ tôi chỉ cần hiển thị line bên trong mã HTML bên trong Return.

Tôi đã cố gắng thực hiện

return(
  
{line}
)

2 từ đây - cách hiển thị một var javascript trong cơ thể HTML

Nhưng điều này không hoạt động. Tôi có thể làm gì?

Hỏi ngày 22 tháng 7 năm 2020 lúc 6:14Jul 22, 2020 at 6:14

Phương thức trả về phải luôn luôn có một thẻ cha mẹ HTML (DIV trong ví dụ của tôi). Yếu tố này có thể có nhiều trẻ em như bạn muốn, nhưng không thể có anh chị em nào.

Sau đó, bạn có thể thực hiện các câu lệnh JavaScript bằng cách quấn chúng trong niềng răng xoăn như vậy

return(
  
{line}
)

3

Vì vậy, mã của bạn phải

return(
  
{line}
)

Đã trả lời ngày 22 tháng 7 năm 2020 lúc 6:35Jul 22, 2020 at 6:35

RubensrubensRubens

3261 Huy hiệu bạc6 Huy hiệu đồng1 silver badge6 bronze badges

Tôi khuyên bạn nên bắt đầu với các hướng dẫn phản ứng, có vẻ như bạn không hiểu cú pháp của React. Trong phương thức render (), bạn cần trả lại JSX, trông rất giống HTML nhưng với sự khác biệt nhỏ. Tôi không biết những gì bạn muốn quay lại, vì vậy tôi đã đưa ra một ví dụ về những gì bạn có thể trả lại,

return(
  
{line}
)

4 với biến dòng bạn đã tạo trong mã của mình.

Ngoài ra, bạn cần lưu ý rằng phương thức kết xuất () chạy mỗi khi có bản cập nhật cho DOM ảo, vì vậy bạn chỉ nên đặt logic vào nó nếu nó hoàn toàn cần thiết.

class Textbox extends React.PureComponent {
    const { property } = this.props;
    
    const ob = property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
    render() {   
        return (
           
{line}
        )
    }
}

export default withTheme(Textbox)

Đã trả lời ngày 22 tháng 7 năm 2020 lúc 6:20Jul 22, 2020 at 6:20

djolfdjolfdjolf

1.1395 huy hiệu bạc18 Huy hiệu đồng5 silver badges18 bronze badges

React đang sử dụng một cú pháp mẫu có tên Mustache ({}) dấu ngoặc xoăn đơn để thay thế biến JavaScript bên trong phần tử JSX.

Sau khi phản ứng đó, kết xuất cùng với giá trị mà bạn đã sử dụng biểu thức nhúng.

Nhúng biểu thức trong JSX

Đã trả lời ngày 22 tháng 7 năm 2020 lúc 6:32Jul 22, 2020 at 6:32

2

Một trường hợp sử dụng đơn giản cho các biến

Hãy bắt đầu với mã từ bài đăng cuối cùng của chúng tôi:

var Hello = React.createClass({
    render: function() {
        return <div>Hello, haters!</div>;
    }
});

Thay vào đó, hãy nói rằng tôi muốn thay thế từ người ghét người ghét bằng một biến JavaScript. Nếu bạn phải đoán, làm thế nào để bạn nghĩ rằng người ta sẽ làm điều này? Nếu bạn đã bối rối, thì đừng lo lắng - nó có thể không rõ ràng ngay lập tức đối với bạn, vì JSX là một siêu đồ của JavaScript và do đó, các quy ước của nó hơi không quen thuộc.

Cách kết xuất các biến trong JSX

Hãy chưng cất câu hỏi của chúng tôi vào một cái gì đó mà chúng tôi có thể tìm kiếm Google với. Nếu bạn nghĩ về nó, những gì chúng tôi thực sự cố gắng tìm hiểu ở đây là cách chúng tôi có thể nói với JSX để hiển thị bất kỳ biểu thức JavaScript nào (về cơ bản là bất cứ điều gì tạo ra giá trị khi được giải thích). Một tìm kiếm nhanh cho biểu thức JavaScript kết xuất JSX JSX mang lại cho chúng tôi câu trả lời!

Để hiển thị biểu thức JavaScript trong JSX, tất cả những gì bạn cần làm là bao quanh biểu thức trong niềng răng xoăn, như vậy:

var Hello = React.createClass({
    render: function() {
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});

Ngay bây giờ thành phần này sẽ hiển thị Hello Hello,! Bởi vì

return(
  
{line}
)

5 hiện không chứa giá trị. Thay vào đó, hãy đặt nó thành thế giới trên thế giới - nhưng chúng ta nên xác định biến

return(
  
{line}
)

5 ở đâu? Phương pháp

return(
  
{line}
)

7 của React chỉ là một phương pháp cũ thông thường, điều đó có nghĩa là nó có thể chứa các biến, hàm và bất kỳ mã nào khác cần thiết để làm cho chế độ xem của bạn hiển thị. Xem xét hoàn cảnh của chúng tôi, đây có vẻ như là một nơi thích hợp để xác định

return(
  
{line}
)

5:

var Hello = React.createClass({
    render: function() {
        var targetOfGreeting = "world";
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});

Thành phần của chúng tôi hiện hiển thị “Xin chào, thế giới!” - Bạn có thể kiểm tra mã làm việc ở đây!check out the working code here!

Một cách sử dụng phổ biến khác cho các biến

Điều cuối cùng đáng nói là làm thế nào bạn có thể sử dụng các biểu thức JavaScript để điền vào các thuộc tính HTML. Một ví dụ tuyệt vời về điều này là các lớp CSS cài đặt theo chương trình, có thể được thực hiện như vậy:

var Hello = React.createClass({
    render: function() {
        var myStyleClass = "exampleCss";
        var targetOfGreeting = "world";
        return (
            <div className={ myStyleClass }>
                Hello, { targetOfGreeting }!
            </div>
        );
    }
});

Bạn có thể kiểm tra mã làm việc ở đây!check out the working code here!

Có hai điều đáng chú ý về mã ở trên. Đầu tiên là chúng tôi kết thúc tuyên bố trở lại của mình trong ngoặc đơn vì nó kéo dài nhiều dòng, được coi là thực tiễn tốt nhất. Điều thứ hai đáng chú ý là chúng tôi sử dụng thuộc tính

return(
  
{line}
)

9 thay vì

class Textbox extends React.PureComponent {
    const { property } = this.props;
    
    const ob = property.name
    const sentence = { 
        first : ' this is the first text ',
        second : ' this is second text',
        third: 'this is third text',
        fourth : 'this is the fourth text',
    }

    
    var line = sentence[ob]
    render() {   
        return (
           
{line}
        )
    }
}

export default withTheme(Textbox)

0. Lý do cho điều này là vì lớp học của người Hồi giáo là một từ dành riêng trong JavaScript, và những người đã tạo ra JSX có một số lý do rất chính đáng đằng sau quyết định của họ để không sử dụng việc sử dụng lớp học. Có thể mất một chút quen thuộc, nhưng khi bạn viết các thành phần React, bạn sẽ luôn sử dụng ClassName thay vì lớp.you will always use className instead of class.

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

Làm thế nào sử dụng bên trong phản ứng trong HTML?

Làm thế nào phản ứng chuyển đổi JSX thành HTML?

HTML có nội dung kết xuất như thế nào?