Reactjs 我如何使用 Typescript 将道具从 index.html 传递到 App 组件

Question

你好，我想将道具从 index.html 传递到 App.tsx，因为你看到我正在使用打字稿。 所以我想用打字稿来做。

我的代码

//index.html

 <div id="root" name="test"></div>  //props name test

//索引.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

var container =document.getElementById('root');



    ReactDOM.render(
    
    
    <App name={container.getAttribute('name')} />
    
     ,
     container
    );


serviceWorker.unregister();

//对不起，我应该提供这个我对打字稿的了解非常少

//app.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

  render(){
  return (
    <div className="App">
     <p>{this.props.name}</p>
    </div>
  )
}
}

export default App;

Answer 1

您应该将道具添加到您的 App 组件构造函数中：

class App extends React.Component {

    constructor(props) {
        super(props);
    }


    render(){