如何使用 ReactDOM 直接渲染 React 组件（ES6 API）？

Posted 2023-02-22

【中文标题】如何使用 ReactDOM 直接渲染 React 组件（ES6 API）？

【英文标题】：How to render a React component (ES6 API) directly using ReactDOM?

【发布时间】：2016-06-06 13:54:42

【问题描述】：

我正在使用ES6 classes API of React（通过使用TypeScript）并希望使用ReactDOM.render() 呈现React.Component 类型的子类型。

以下代码有效：

class MyComponentProps 
    someMember: string;


class MyComponent extends React.Component<MyComponentProps, > 
    constructor(initialProps: MyComponentProps) 
        super(initialProps);
    


let rootNode = document.getElementById('root');
ReactDOM.render(
    <MyComponent someMember="abcdef" />,
    rootNode
)

现在，鉴于react.d.ts 中构造函数的显式类型，我假设我可以传递填充初始属性的 MyCustomProps 对象的一个​​实例（如上述代码中所做的那样）。但是如何在没有 JSX/TSX 语法的情况下直接渲染组件呢？

以下方法不起作用：

ReactDOM.render(new MyComponent(new MyComponentProps()), rootNode);

我知道我可以只使用 JSX 语法作为解决方法，但由于我的 MyCustomProps 对象非常大，我不想重复 MyCustomProps 对象的每个成员。

【问题讨论】：

你不应该使用React.createElement(MyComponent, new MyComponentProps())而不是new MyComponent(new MyComponentProps())吗？

确实，这行得通——我还可以通过查看已编译的 .jsx 代码来判断，该代码将 JSX 语法映射到该语法。如果您将评论作为答案发布，我会将其标记为已接受。

【参考方案1】：

你应该使用React.createElement。 React.createElement 采用标签名称或组件、属性对象和可变数量的可选子参数。 例如

class App extends React.Component 
  render()
    return (

      <div><h1>Welcome to React</h1></div>
    );
  

使用jsx可以这样渲染

ReactDOM.render(<App />, document.getElementById('app'));

另一种方式（不带jsx）

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

一个运行的例子 -

class App extends React.Component 
  render()
    return (
      <div><h1>Welcome to React</h1></div>
    );
  


ReactDOM.render(React.createElement(App, null), document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="app">
</div>

【讨论】：

你答案中的最后一行代码就是我要找的，谢谢！

未来的 Google 员工：如果您在 react.js:5045 收到 TypeError: this is undefined，您应该将代码更改为如下所示。

所以我必须使用ReactDOM.render(React.createElement(), root) 而不是ReactDOM.render(<div></div>, root)？有什么办法可以让 TypeScript 在 ReactDOM.render()

中允许 JSX 文字