8

ReactのES6 クラス API をReact.Component(TypeScript を使用して) 使用しており、タイプを使用してサブタイプ化されたクラスをレンダリングしたいと考えています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。

4

1 に答える 1

15

する必要があり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>

于 2016-02-24T12:05:29.030 に答える