0
に反応がthis bookから反応するが、私はこの単純なジェイソン・ベースのテーブルのデータをレンダリングしようとすると：キャッチされていないにReferenceError：データはで定義されていない私が学んでいる
<!-- 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>
私はAdmitedly
Uncaught ReferenceError: data is not defined
を取得しますこれはどこにデータを置くべきか分かりませんが、この本はあいまいです。私はスクリプト内の他の場所にデータを置こうとしましたが、まだエラーがあります。あなたの助けに感謝します。
'App'の外に' data'と 'headings'を移動するか、' this.props.data'と 'this.props.headings'の代わりに' data'と 'headings'を使用します。 –
ああ、そうです働いた。ありがとうアレクサンダー！ – Karlom