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(){