时间戳

首页 > 解决方案 > 如何将 HTML 中的 props 传递给根组件

javascript - 如何将 HTML 中的 props 传递给根组件

问题描述

我在 React 中为现有 HTML/JavaScript （不是 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>

标签： javascriptreactjs

解决方案

如果你想从你的 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 传递给它。

推荐阅读