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 [
document.write[line]
]
}
}
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ể HTMLNhư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}
]
3Vì 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 Hello, haters!;
}
}];
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 Hello, { targetOfGreeting }!;
}
}];
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 Hello, { targetOfGreeting }!;
}
}];
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 [
Hello, { targetOfGreeting }!
];
}
}];
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.