Question

我正在使用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的component元素是这样的：

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

Answer 1

当您需要通过道具传递数据时，只需提及道具ID和值以及组件。

在您的情况下，代码如下：

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

上面的示例名字和姓氏是两个道具

您可以在 Submitcancel 组件内的构造函数中获取值。

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

Answer 2

如果您想从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将道具传递给它。

Answer 3

请遵循以下代码：

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

如何将HTML中所述的道具传递到根组件

3 个答案: