App.js 中的函数未显示在 .jsx 文件中

Question

我有一个 React 网站，并且有一个 jsx 文件，该文件试图调用我在 App.js 中定义的一些函数，

import React from "react";
import function1 from './App.js'
import function2 from './App.js'
import function3 from './App.js'

function Home() {
  return (
    <div className="home">
      <div class="container">
        <div>
          {function1() ? function2(): function3()}
        </div>
      </div>
    </div>
  );
}

export default Home;

然后我有一个如下所示的 App.js 文件：

import React from 'react';
import './App.css'

function App() {
    const function1 = () => { 
        return booleanvalue
    }
    const function2 = () => { 
        return (<button onClick={...} ... </button>)
    }
    const function3 = () => { 
        return (<button onClick={...} ... </button>)
    }
}

export default App;

但 jsx 文件中没有显示任何内容。我尝试在最后导出这些函数，但这也没有做任何事情。有什么方法可以在我的 App() 中导出这些本地函数或调用它们，因为我已经导出了 App？

Answer 1

import './App.css'
    export const function1 = () => { 
        return booleanvalue
    }

export const function2 = () => { 
        return (<button onClick={...} ... </button>)
    }

    export const function3 = () => { 
        return (<button onClick={...} ... </button>)
    }

export function App() {



}

export {App, function, function2, function3 }

这就是导出函数的方式，但是如果您想要 React 组件，那么您的组件应该以大写字符开头。