อะไรคือจุดประสงค์ของการจัดฟันแบบลอนคู่ในไวยากรณ์ JSX ของ React

จากบทช่วยสอน react.jsเราจะเห็นการใช้วงเล็บปีกกาคู่นี้:

<span dangerouslySetInnerHTML={{ __html: rawMarkup }} />

จากนั้นในบทแนะนำที่สอง "กำลังคิดในการตอบสนอง" :

 <span style={{ color: 'red' }}>
     {this.props.product.name}
 </span>;

อย่างไรก็ตามเอกสาร React JSXไม่ได้อธิบายหรือกล่าวถึงวงเล็บปีกกาสองชั้น ไวยากรณ์นี้ (double curlies) มีไว้เพื่ออะไร? และมีวิธีอื่นในการแสดงสิ่งเดียวกันใน jsx หรือนี่เป็นเพียงการละเว้นจากเอกสาร?

มันเป็นเพียงตัวอักษรของวัตถุที่อยู่ในค่า prop มันเหมือนกับ

var obj = {__html: rawMarkup};

<span dangerouslySetInnerHTML={obj} />

Curly Braces มี 2 การใช้งานที่นี่: -

1. {.. } ประเมินเป็นนิพจน์ใน JSX
2. {key: value} แสดงถึงวัตถุจาวาสคริปต์

ลองดูตัวอย่างง่ายๆ

<Image source={pic} style={{width: 193}}/>

หากสังเกตpicจะล้อมรอบด้วยเหล็กดัดฟัน นั่นคือวิธีการฝังตัวแปร JSX picสามารถเป็นนิพจน์ / ตัวแปร / อ็อบเจ็กต์ Javascript คุณยังสามารถทำบางสิ่งเช่น {2 + 3} และจะประเมินเป็น {5}

มาผ่าสไตล์กันที่นี่ {width: 193}เป็นวัตถุ Javascript และในการฝังวัตถุนี้ใน JSX คุณต้องใช้วงเล็บปีกกาดังนั้น{ {width: 193} }

หมายเหตุ: หากต้องการฝังนิพจน์ / ตัวแปร / อ็อบเจ็กต์ Javascript ใน JSX คุณต้องใช้วงเล็บปีกกา

ในกรณีที่คุณไม่ทราบเหตุใดจึง{{color: 'red'}}ใช้ในstyleแท็ก

<span style={{color: 'red'}}>
    {this.props.product.name}
</span>;

ตามเอกสารอย่างเป็นทางการของ Reactแอตทริบิวต์ style ยอมรับออบเจ็กต์ JavaScriptแทนที่จะเป็นสตริง CSS

React ใช้ JSX ใน JSX ตัวแปรใด ๆ state object นิพจน์และอื่น ๆ จะต้องอยู่ใน {}

ในขณะที่ให้สไตล์อินไลน์ใน JSX ต้องระบุเป็นอ็อบเจ็กต์ดังนั้นจึงต้องอยู่ในวงเล็บปีกกาอีกครั้ง {}

นี่คือเหตุผลที่มีวงเล็บปีกกาสองคู่

หมายความว่าแทนที่จะประกาศตัวแปรสไตล์ที่ตั้งค่าเป็นอ็อบเจ็กต์ของคุณสมบัติสไตล์ที่ต้องการคุณสามารถตั้งค่าคุณสมบัติสไตล์ในอ็อบเจ็กต์แทนได้ ... นี่เป็นแนวทางปฏิบัติที่ดีที่สุดเมื่อสไตล์ที่คุณต้องการเพิ่มมีน้อย องค์ประกอบที่ต้องการรูปแบบมากขึ้นการประกาศตัวแปรลักษณะจะสะอาดกว่า

ตัวอย่างเช่นสำหรับองค์ประกอบที่มีคุณสมบัติสไตล์น้อยกว่าให้ทำเช่นนี้

<span style={{color: 'red'}}>
  {this.props.product.name}
</span>

สำหรับองค์ประกอบ HTML ที่มีคุณสมบัติสไตล์เพิ่มเติมให้ทำเช่นนี้

const spanStyle = {
   backgroundColor: 'red',
   color: 'grey',
   margin: '-25px'
}

จากนั้นคุณเรียกมันด้วยไวยากรณ์ jsx

<span style={spanStyle}>
  {this.props.product.name}
</span>

ฉันพยายามบอกเป็นคำง่ายๆเพื่อให้ทุกคนเข้าใจ รหัสด้านล่าง:

<span dangerouslySetInnerHTML={{__html: rawMarkup}} />

เท่ากับ

<span 
     dangerouslySetInnerHTML={ {__html: rawMarkup} } 
/>

ดังนั้นเราควรใช้นิพจน์การตอบสนองหากเราจะกำหนดวัตถุตามตัวอักษรให้กับคุณสมบัติ

สำหรับบางคนที่ส่วนใหญ่จะย้ายจาก AngularJs เพื่อ ReactJs มันอาจจะเป็นส่วนหนึ่งของความสับสนกับการแสดงออกของผู้ประกอบการที่มีผลผูกพัน AngularJs' a {{}} ดังนั้นลองดูมันแตกต่างกันใน ReactJs

การตีความวงเล็บปีกกาคู่ของฉันคือสไตล์อ็อบเจ็กต์ยอมรับเฉพาะออบเจ็กต์ JavaScript ดังนั้นอ็อบเจ็กต์จะต้องอยู่ในวงเล็บปีกกาเดี่ยว

style={jsObj}

อ็อบเจ็กต์สำหรับสไตล์อาร์ติแฟกต์เป็นคีย์: คู่ค่า (พจนานุกรมเทียบกับอาร์เรย์) และอ็อบเจ็กต์นั้นแสดงเป็นตัวอย่างเช่น {color:'#ffffff'}และวัตถุที่แสดงเป็นตัวอย่างเช่น

คุณมี:

style = { jsObj }

และ

jsObj = {color:'#ffffff'}

เช่นเดียวกับพีชคณิตเมื่อคุณแทนที่มันหมายถึง:

style = { {color:'#ffffff'} }