如何直接使用 ReactDOM 渲染 React 组件 (ES6 API)？

Question

我正在使用 ES6 classes API of React（通过使用 TypeScript）并希望使用 ReactDOM.render().

呈现 React.Component 类型的子类型 class

以下代码有效：

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 对象的每个成员。

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

如何直接使用 ReactDOM 渲染 React 组件 (ES6 API)？

How to render a React component (ES6 API) directly using ReactDOM?

reactjs

typescript

ecmascript-6

react-dom