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

发布时间：2020-12-15 05:04:55 所属栏目：百科来源：网络整理

导读：我正在使用 ES6 classes API of React(使用TypeScript)并希望使用ReactDOM.render()呈现类型为React.Component的子类型类. 以下代码有效： class MyComponentProps { someMember: string;}class MyComponent extends React.ComponentMyComponentProps,{} { c

我正在使用 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.
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,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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!