Javascript 如何使用Typescript将道具从index.html传递到应用程序组件

您好，我想将道具从index.html传递到App.tsx，正如您看到的，我正在使用typescript。所以我想用typescript来做

我的代码

//index.html

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

//道具名称测试

//Index.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();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
var container=document.getElementById（'root'）；
ReactDOM.render(
,
容器
);
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;

从“React”导入React；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展了React.Component{
render（）{
返回(
{this.props.name}

)
}
}
导出默认应用程序；

您应该向应用程序组件构造函数添加道具：

class App extends React.Component {

    constructor(props) {
        super(props);
    }


    render(){

---

您应该向应用程序组件构造函数添加道具：

class App extends React.Component {

    constructor(props) {
        super(props);
    }


    render(){

---

看起来不错。。。你的问题到底是什么？因为我在index.tsx中使用typscript，它说{Type'{name:string | null}不可分配给Type'IntrinsicAttributes&IntrinsicClassAttributes&Readonly&Readonly.}。请尝试强制转换为

任意

：

。这应该可以做到。你不能，当传递道具时，它必须是组件到组件的关系。你需要指出组件接受的道具<代码>应用程序扩展React.Component。请看一些例子有很多看起来不错的。。。你的问题到底是什么？因为我在index.tsx中使用typscript，它说{Type'{name:string | null}不可分配给Type'IntrinsicAttributes&IntrinsicClassAttributes&Readonly&Readonly.}。请尝试强制转换为

任意

：

。这应该可以做到。你不能，当传递道具时，它必须是组件到组件的关系。你需要指出组件接受的道具<代码>应用程序扩展React.Component。请看一些例子，有很多