javascript - 在 React 中，为什么从我们的代码中的另一个函数调用一个函数不起作用并显示？

Question

我有一个关于 React 和 JSX 的问题。

下面的主要组件代码工作正常:

function App(){
    return (
        <Hello />
    )

} 

然后我定义一个函数组件并调用其中的函数。为什么不起作用？

function Hello(){
    f();    
}

function f(){
    return(<h1>hello</h1>);
}

虽然这确实有效:

 function Hello(){
      return(<h1>hello</h1>);
 }

Answer 1

功能组件必须返回某种形式的 React 组件

要详细说明其他答案，您应该 refer to the example in the React docs:

    function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
    }

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element.

因此，正如其他人所说，您最好的选择是返回一个 React 元素(大概通过 JSX ，但可以在您尝试时调用其他组件):

// Using conventional function syntax
function Hello(){
    return f();    
}

// Using arrow functions and implicit returns
const Hello = () => f();