如何使用ReactDOM直接呈现React组件(ES6 API)？

Question

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

以下代码有效:

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>