मैं स्ट्रिंग को jsx में कैसे परिवर्तित करूं?

Question

मैं एक स्ट्रिंग कैसे ले सकता हूं, और इसे jsx में परिवर्तित कर सकता हूं? उदाहरण के लिए, यदि मैं textarea से स्ट्रिंग लाता हूं, तो मैं इसे React तत्व में कैसे परिवर्तित कर सकता हूं;

var jsxString = document.getElementById('textarea').value; 

क्लाइंट पर इसे बदलने के लिए मैं किस प्रक्रिया का उपयोग करूंगा? क्या यह संभव है?

{ 
    "presets": ["react"] 
} 

फिर

./node_modules/.bin/babel script.js --out-file script-compiled.js 

चलाने आप अधिक जानकारी here पा सकते हैं:

Answer 1

आप पूर्व निर्धारित react

npm install --save-dev babel-cli babel-preset-react 

साथ कोलाहल उपयोग करने की आवश्यकता आपके .babelrc फ़ाइल में निम्न पंक्ति जोड़ें

Answer 2

आप स्ट्रिंग

<div>Hello World</div> 

पर विचार अगर हम बहुत सख्त हैं, तो यह वास्तव में वैध JSX है। प्रश्न यह है कि इस जेएसएक्स स्ट्रिंग को रिएक्ट कोड में कैसे संकलित करें।

सबसे आसान और अनुशंसित तरीका बैबेल जैसी कुछ लाइब्रेरी डाउनलोड करना और कोड को बदलने के लिए इसका उपयोग करना है। बैबेल ब्राउज़र में repl does जैसे चला सकता है।

जेएसएक्स को अन्य प्रारूपों में बदलने के लिए भी संभव है, लेकिन इस मामले में आपको एक कंपाइलर ढूंढना होगा या स्वयं को बनाना होगा।

बनाने के लिए चरणों JSX => परिवर्तन प्रतिक्रिया अपने आप को है:

1. एएसटी प्रतिनिधित्व में कोड स्ट्रिंग को बदलने

तो स्ट्रिंग के लिए वापस AST और उत्पादन कोड पार्स आप एएसटी पार्सर की कुछ किंडर की तरह espree जेएसएक्स का समर्थन करते हैं और फिर आप एक कोड बना सकते हैं जो एएसटी पेड़ पर चलता है और कुछ आउटपुट करता है, जैसे इसे रीक्ट-कोड आउट करें।

जेएसएक्स डेटा के एएसटी पेड़ में जेएसएक्स नोड्स के साथ सामान्य जावास्क्रिप्ट एएसटी शामिल है। पार्सर को पेड़ के माध्यम से चलना चाहिए और जेएसएक्स नोड्स को सामान्य जावास्क्रिप्ट कोड में बदलना चाहिए।

यदि आप प्रतिक्रिया करने के लिए संकलित करते हैं और टैग "div" के साथ एक जेएसएक्स नोड का सामना करते हैं तो आपको उस कॉल के पैरामीटर के रूप में डाले गए एएसटी नोड के तहत पाए गए गुणों और उपन्यासों के साथ React.createElement("div",... में संकलित करना चाहिए।

मैंने एक छोटा एएसटी वाकर बनाया है, जो एएसटी पेड़, ASTWalker को संसाधित कर सकता है, जिसका उपयोग एएसटी पेड़ को कुछ आउटपुट प्रारूप में बदलने के लिए किया जा सकता है, जैसे रिएक्ट या डोम।

ऑन लाइन है कि यह कैसे उपयोग करने के लिए के उदाहरण यहाँ है:

http://codepen.io/teroktolonen/pen/KzWVqx?editors=1010

मुख्य कोड इस तरह दिखता है:

// here is the JSX string to parse 
    var codeStr = "<div>Hello world</div>"; 
    var walker = ASTWalker({ 
     defaultNamespace: "react", 
    }); 
    // compile AST representation out of it. 
    var rawAST = espree.parse(codeStr, { 
      ecmaVersion: 6, 
      sourceType: "script", 
      // specify additional language features 
      ecmaFeatures: { 
      // enable JSX parsing 
      jsx: true 
      } 
     }); 

    // then you can walk the walk to create the code 
    walker.startWalk(rawAST, {}); 
    var code = walker.getCode(); 
    console.log(code); 
    document.getElementById("sourceCode").innerHTML = code; 

अस्वीकरण: पुस्तकालय प्रतिक्रिया में संकलन के लिए intented नहीं है । सादा जावास्क्रिप्ट + डीओएम प्रतिनिधित्व में संकलित करने के लिए इसका उपयोग ज्यादातर defaultNamespace: "DOM", के साथ किया जाता है। सरल टैग की तुलना में कुछ अधिक जटिल कोशिश करने से एक त्रुटि हो सकती है।

महत्वपूर्ण बात यह ध्यान रखना है कि प्रतिक्रिया केवल जेएसएक्स के लिए संभव आउटपुट प्रारूप नहीं है।

Answer 3

मैं कुछ सफलता के साथ एचटीएमएल-टू-रिएक्ट का उपयोग कर रहा हूं (स्वयं बंद टैग हालांकि समस्या का कारण बनता है, लेकिन फिक्स अनुरोधों में एक फिक्स है ...) वस्तुओं की तरह डोम के रूप में मार्कअप स्ट्रिंग को पार्स करने के लिए, और बदले में तत्वों को प्रतिक्रिया दें। यह सुंदर नहीं है, और यदि आप इससे बच सकते हैं, तो ऐसा करें। लेकिन यह काम पूरा हो जाता है।

एचटीएमएल करने वाली प्रतिक्रिया GitHub पर: https://github.com/mikenikles/html-to-react

Answer 4

आप JSX विशेषता dangerouslySetInnerHTML

उदाहरण नीचे उपयोग के उपयोग पर विचार कर सकते हैं:

class YourComponent{ 

render() { 
    someHtml = '<div><strong>blablabla<strong><p>another blbla</p/></div>' 

    return(
     <div className="Container" dangerouslySetInnerHTML={{__html: 
     someHtml}}></div> 
    ) 
    } 
} 

मैं जानता हूँ कि आप के लिए देर हो चुकी है :) लेकिन उम्मीद है कि यह किसी और की मदद कर सकता है