Как визуализировать компонент React (API ES6) напрямую с помощью ReactDOM?

Я использую API классов ES6 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 довольно большой, я не хочу повторять каждый член объекта MyCustomProps.


reactjs typescript react-dom ecmascript-6
person Dynalon    schedule 24.02.2016    source источник
comment
Разве вы не должны использовать React.createElement(MyComponent, new MyComponentProps()) вместо new MyComponent(new MyComponentProps())?   -  person Nikos Paraskevopoulos    schedule 24.02.2016
comment
Действительно, это сработает — я также мог убедиться, посмотрев на скомпилированный код .jsx, который сопоставляет синтаксис JSX именно с этим синтаксисом. Если вы разместите свой комментарий в качестве ответа, я отмечу его как принятый.   -  person Dynalon    schedule 24.02.2016

Ответы (1)


arrow_upward
15
arrow_downward

Вы должны использовать 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>

person WitVault    schedule 24.02.2016
comment
Последняя строка кода в вашем ответе — это то, что я искал, спасибо! - person Dynalon; 24.02.2016
comment
Будущие гуглеры: вам следует изменить свой код, чтобы он выглядел так, если вы получаете TypeError: this is undefined в react.js:5045. - person Nate Glenn; 08.04.2016
comment
Значит, мне нужно использовать ReactDOM.render(React.createElement(), root) вместо ReactDOM.render(<div></div>, root)? Можно ли что-нибудь сделать, чтобы TypeScript разрешил литерал JSX в ReactDOM.render() - person Minh Nghĩa; 24.09.2020