代码之家 › 专栏 › 技术社区 › Dynalon

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

react-dom ecmascript-6 typescript reactjs

Dynalon · 技术社区 · 8 年前

我正在使用 ES6 classes API of React (通过使用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 对象相当大,我不想重复 我的自定义属性 对象

1 回复 | 直到 7 年前

WitVault 7 年前

你应该使用 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>

推荐文章

Miquel Al. Vicens · 反应不改变输入值

2 年前

sander · 如何在reactjs中渲染到两个不同的网格?

6 年前

user7232873 · registerServiceWorker在React JS中做什么?

7 年前

Aleskei Sakharov · react dom 16.1中缺少ReactInputSelection

7 年前

Tavem · Render中的“Uncaught TypeError:React.createClass不是函数”。js文件(electron app)

7 年前

Nitin Bisht · 如何在reactjs中呈现JSON数据?

7 年前

Tierna D. Jack Lawless · 尝试构建时出现“无法从“…/react-konva/src/react-konva.js”中解析模块“react/lib/react”

7 年前

idude · CDN与React的网页包

7 年前

Nitesh Rana · 未定义ReactDom?

7 年前

Collybus · Reactjs Uncaught错误:元素类型无效:应为字符串

7 年前