在 React JS 中将变量从一个文件移动到另一个文件

Question

我是 React JS 的新手，我正在尝试了解如何从文件导出变量并将其导入另一个文件。我试过的是：

文件App.js:

import React from 'react'


function App() {

  [hi, setUpHi] = useState('Hello World')

  return (
    <div className='App'>
      <Test /> 
    </div>
  );
}

export default App
export {hi}

文件Test.js:

import React from 'react'
import {hi} from './App'

function Test() {
    return (
        <div>
            {hi}
        </div>
    )
}

export default Test

但这行不通:( 它说 hi 没有定义。我试图在函数之外定义它，这也不起作用。有人可以帮助我吗？

ps:

我知道我可以使用 props:

<Test hi = {'Hello World'} />

然后

function Test({hi}) ... \ etc.

但是通过这个例子，我想了解如何导出和导入变量，这可能比通过 props 容易得多。（或者我这个假设错了吗？）

Answer 1

看起来您正试图在其函数范围之外引用“hi”变量（它是在组件中声明的，而不是在根级别）- 因此它在全局范围内未定义。

此外，仅供参考，以这种方式使用组件状态是一种反模式。状态是 FunctionComponent 应用程序的内部，以这种方式公开它的状态可能会损害组件的纯度。

如果您打算在组件之间共享状态，请通过 props 传递它们，或使用自定义挂钩。

在 React JS 中将变量从一个文件移动到另一个文件

Moving variables from one file to the other in React JS

reactjs

variables

import

export