Question

我学习了this book的反应，但是当我尝试渲染这个简单的基于jason的表数据时：

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.6.2/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>



    <script type="text/babel">





var App = React.createClass({    
render: function(){

var data = [
         { "when": "2 minutes ago", "who": "Jill Dupre",
        "description": "Created new account"
        },
        {
        "when": "1 hour ago",
        "who": "Lose White",
        "description": "Added fist chapter"
        },
        {
        "when": "2 hours ago",
        "who": "Jordan Whash",
        "description": "Created new account"
        }];

var headings = ['When', 'Who', 'Description']



var headings = this.props.headings.map(function(heading) {
return(<th>
{heading}
</th>);
});

var rows = this.props.data.map(function(change) {
return(<tr>
<td> {change.when} </td>
<td> {change.who} </td>
<td> {change.description} </td>
</tr>);
});
return(<table>
{headings}
{rows}
</table>);
}
});

ReactDOM.render(

  <App headings = {headings} data = {data} />,
  document.getElementById('content')
);

    </script>
  </body>
</html>

我得到了

Uncaught ReferenceError: data is not defined

这是因为我不知道应该把数据放在哪里，但书中对此却含糊其辞。我尝试将数据放在脚本的其他地方，但仍然有错误。非常感谢您的帮助。

Answer 1

this.props ：您的类/组件的引用属性。在您的示例中，数据和标题在render函数中声明，这意味着它们是普通的var声明。您无法使用 this.props 引用它们，而只需使用数据和标题。

未捕获的ReferenceError：未在react中定义数据

1 个答案: