react中的类变量和函数变量有什么区别答案

【问题标题】：What is the difference between class variables and function variables in reactreact中的类变量和函数变量有什么区别
【发布时间】：2015-06-24 05:53:16
【问题描述】：

我在反应中使用道具。发现了这个

var App = React.createClass({


        render: function(){
            var t = this.props.txt;
            return(<div>
                    <h1> {t}</h1>

                </div>);

        },

    });

    React.render(<App txt="hi"/>, document.body);

这很好用，因为变量 t 在渲染函数中。但是当像这样放在渲染函数之外时

var App = React.createClass({
// position of t is shifted here
    var t = this.props.txt;
        render: function(){

            return(<div>
                    <h1> {t}</h1>

                </div>);

        },

    });

    React.render(<App txt="hi"/>, document.body);

这不起作用。由于我直接在 React.render 中调用 App 而不是函数渲染，我希望 App 应该有可用的道具。我错过了什么？

【问题讨论】：

App 是一个类吧？我在渲染方法中实例化类。 @FelixKling
是的，有点。最后一行不是问题。

标签： javascript reactjs

【解决方案1】：

我不太确定您为什么希望这会起作用。那只是无效的JavaScript。您不能将variable declaration 放在object literal 中。您正在做什么的简化示例：

var foo = { var bar = 42; };

这是一个语法错误。我推荐read a JavaScript tutorial to learn more about objects。

【讨论】：

var a ={ function v(){ var x =5; } } 即使这似乎是一个错误
嗯，类似的原因：你不能在对象字面量中包含函数声明。对象字面量的语法是{key: value, key: value, ...}。查看链接。
那么让我们看看，正如您所说，App 是一个对象，而 render 是一个函数。如果 App 中的变量声明无效。我在 render 中声明了 var t。所以按照我们的约定，它也应该是无效的
我没有说App 是一个对象，但是您将一个对象传递给React.createClass。是的，render 是一个函数。老实说，我建议您在学习 React 之前先更好地了解 JavaScript...
也许您指的是您的第一条评论。 var a = { function v(){ var x =5; } } 的问题不是变量声明而是函数定义。您没有遵循{key: value} 模式。你刚刚写了{value}。 var a = { b: function v(){ var x =5; } } 将是有效的。同样，这与 React 无关。这就是 JavaScript 的所有基础知识。或许您会发现这对几个重要主题的简短介绍很有帮助：felix-kling.de/jsbasics