如何將 HTML 中聲明的道具傳遞給根組件

Question

我在現有 HTML/JavaScript （不是 React 項目）項目中為兩個按鈕使用 React 中的一個簡單組件。 它看起來像這樣：

//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')
)

HTML 文件如下所示：

    <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>

Answer 1

如果您想從 HTML <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)

對於純 React 解決方案，您必須包裝 Submitcancel 組件，以便您可以使用 JSX 將 props 傳遞給它。

Answer 2

當你需要通過 props 傳遞數據時，你只需要在組件中提到 props id 和 value。

在您的情況下，代碼將類似於：

ReactDOM.render(
  <Submitcancel FirstName={"first name"} LastName={"last name"}/>,
 document.getElementById("react-submit-cancel")
)

上面的例子FirstName和LastName是兩個道具

您可以在Submitcancel組件內的構造函數中獲取該值。

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

Answer 3

請遵循以下代碼：

ReactDOM.render(
  <Submitcancel />,
  document.getElementById("react-submit-cancel")
)