Question

我正在学习React JS。

现在，我在App.js文件中使用一个变量，并希望在index.js文件的render（）方法中使用此变量，但它向我显示此错误：

./ src / index.js第7行：“ no-undef”未定义“ bioData”

搜索关键字以详细了解每个错误。

在App.js文件中，我有以下代码：

import React from 'react';
import logo from './logo.svg';
import './App.css';
import * as serviceWorker from './serviceWorker';

function Person (props) {
  return (
    <div className="p1">
      <h1>{props.name}</h1>
      <h3>{props.skill}</h3>
    </div>
  );
}

var bioData = (
  <div>
    <Person name="alex" skill="designer" />
    <Person name="shibbir" skill="web developer" />
  </div>
);

export default Person;

，在index.js文件中，我有以下代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Person from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(bioData, document.querySelector("root"));    
serviceWorker.unregister();

你能告诉我为什么显示错误吗？

Answer 1

问题是您尚未将index.js导入var bioData（或在本地定义）。在模块中，顶层声明不是全局声明，模块具有自己的作用域（谢天谢地）。因此，App.js中的index.js没有定义全局biodata的目标。

如果要在index.js中使用App.js，请从export var bioData = {/*...*/};导出它：

index.js

......并将其导入Person，也许是在您导入import Person, { bioData } from './App';的那一行：

export default bioData;

请注意，这是一个以命名的导出/导入。您在评论中询问是否应该在App.js中使用App.js，但是不能，Person（var）中已经有默认导出。您只能有一个默认导出（或没有默认导出），然后有任意数量的命名导出（或没有）。

旁注：let已过时。使用const或ReactDOM.render(bioData, document.querySelector("root"));。

注释2，重新输入此代码：

id="root"

假设您要渲染到document.getElementById("root")元素，则该元素应该是document.querySelector("#root")（更惯用）或document.querySelector("root")，而不是<root>...</root>（查找options.fork元素。

如何在React JS渲染方法中使用变量？

1 个答案: