Question

我现在开始使用React和Node.js进行Web开发，这对我来说都是新手，所以我在学习本教程：https://reactjs.org/tutorial/tutorial.html。我使用Visual Studio作为IDE。

在我尝试通过道具传递数据之前，一切似乎都按预期进行。那时，“ props”被标记为错误“无法解析符号'props。我已经在Google自己傻傻地试图找到解决方案。

到目前为止，我已经尝试过：

导入React而不是将其声明为变量。给出另一个错误：符号“ React”无法正确解析，可能位于无法访问的模块中
创建一个构造函数。出现另一个错误：呼叫目标不包含任何签名。
为道具类型安装了npm软件包
我已将问题发布到相关的问题上

因此，在这一点上，我转向大家，您能帮助我前进吗？请参阅下面的代码：

declare var require: any;

var React = require('react');
var ReactDOM = require('react-dom');
//import * as React from "react";
//import * as ReactDOM from "react-dom";


//node_modules\.bin\webpack app.tsx --config webpack-config.js
class Square extends React.Component<any, any> {
    //constructor() {
    //    super();
    //}

    render() { 
        return (
            <button className="square">
                {this.props.value}
            </button>
        );
    }
}

class Board extends React.Component {
    renderSquare(i) {
        return <Square value={i}/>;
    }

    render() {
        const status = 'Next player: X';

        return (
            <div>
                <div className="status">{status}</div>
                <div className="board-row">
                    {this.renderSquare(0)}
                    {this.renderSquare(1)}
                    {this.renderSquare(2)}
                </div>
                <div className="board-row">
                    {this.renderSquare(3)}
                    {this.renderSquare(4)}
                    {this.renderSquare(5)}
                </div>
                <div className="board-row">
                    {this.renderSquare(6)}
                    {this.renderSquare(7)}
                    {this.renderSquare(8)}
                </div>
            </div>
        );
    }
}

class Game extends React.Component {
    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board />
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
    <Game />,
    document.getElementById('root')
);

道具无法在React类的渲染中解析

0 个答案: