Question

我试图将属性从DOM传递给React组件。组件渲染，没有属性，像这样：

<script>
 ReactDOM.render(
  BusinessSearch,
  document.getElementById('business-select-root')
 );
</script>

这会呈现没有问题，但我想向BusinessSearch组件添加属性。我能找到的唯一方法是使用React.createElement（），这就是我所做的：

<script>
    ReactDOM.render(
        React.createElement(BusinessSearch, {personId: 5 }),
        document.getElementById('business-select-root')
    );
  </script>

但这给了我以下内容 errors

我已经看到完全相同的东西在React v15.6.1的不同应用程序中工作。此应用程序具有React v16.2.0。

编辑：

BusinessSearch Component非常庞大，所以我不会在这里填写完整的代码。这是组件及其构造函数的定义方式

import React from "react";
import BusinessSelect from "./BusinessSelect";

export default class BusinessSearch extends React.Component {

constructor (props) {
    super(props);
    this.state  = {
        searchInFocus: false,
        searchInputValue: "",
        selectedId: "",
        businesses: [],
        nameValue: "",
        websiteValue: "https://www.",
        idValue: "",
        editMode: false
    };

}

该组件将添加到app.js中的窗口中：

import BusinessSearch from "./components/BusinessSearch";
window.BusinessSearch = <BusinessSearch />;

Answer 1

试试这个

<script>
  ReactDOM.render(
    <BusinessSearch personalId={5} />,
    document.getElementById('business-select-root')
 );
</script>

Answer 2

你想把道具传递给BusinessSearch？用JSX做正常的事情：

ReactDOM.render(
    <BusinessSearch personId={5} />,
    document.getElementById('business-select-root')
);

或者，没有JSX：

import BusinessSearch from "./components/BusinessSearch";

ReactDOM.render(
    React.createElement(BusinessSearch, {personId: 5}, null),
    document.getElementById('business-select-root')
);

不要将组件分配给window，您不需要。

将属性传递给DOM中的React Component

2 个答案: