मैं मौजूदा एचटीएमएल/जावास्क्रिप्ट में दो बटनों के लिए रिएक्ट में एक साधारण घटक का उपयोग कर रहा हूं, (एक प्रतिक्रिया परियोजना नहीं) प्रोजेक्ट। यह इस तरह दिख रहा है:

//Submitcancel.jsx
'use strict'

class Submitcancel extends React.Component {

    constructor(props) {
        super(props)
        console.log(props)
    }

    render() {
        return (
            <div className="form-buttons">
                <div className="ibm-col-12-12">
                    <button id="buttonSubmit" name="buttonSubmit" value="Submit" type="submit" className="ibm-btn-pri dw-btn-blue">Submit</button>
                    <button value="Cancel" id="buttonCancel" name="buttonCancel" className="ibm-btn-sec dw-btn-blue">Cancel</button>
                </div>
            </div>
        )
    }
}

ReactDOM.render(
    // React.createElement(Submitcancel),
    // document.querySelector('#react-submit-cancel')
)

एचटीएमएल फ़ाइल इस तरह दिखती है:

    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- Load React component. -->
    <script type="text/babel" src="./js/components/Submitcancel.jsx"></script>

घटक तत्व जहां मैं props को परिभाषित करना चाहता हूं वह इस प्रकार है:

<div id="react-submit-cancel"></div>
0
Ciprian 17 अक्टूबर 2018, 12:06

2 जवाब

सबसे बढ़िया उत्तर

यदि आप अपने एचटीएमएल <div> से बटन टेक्स्ट को पकड़ना चाहते हैं, तो आपको उसके लिए एक गैर-प्रतिक्रिया समाधान की आवश्यकता है:

<div id="react-submit-cancel" submitText="Go"></div>

फिर आपके प्रारंभ में:

const el = document.querySelector('#react-submit-cancel');
const props = {
  submitText: el.getAttribute("submitText") || "Submit", // default value
  cancelText: el.getAttribute("cancelText") || "Cancel"
};
ReactDOM.render(React.createElement(Submitcancel, props), el)

एक शुद्ध प्रतिक्रिया समाधान के लिए आपको सबमिटकैंसल घटक को लपेटना होगा ताकि आप JSX का उपयोग करके इसे प्रॉप्स पास कर सकें।

1
Chris G 17 अक्टूबर 2018, 13:04

कृपया इस कोड का पालन करें:

ReactDOM.render(
  <Submitcancel />,
  document.getElementById("react-submit-cancel")
)
-2
Ali Torki 17 अक्टूबर 2018, 09:09