如何从 React 中的方法返回 JSX？

Posted 2023-02-21

【中文标题】如何从 React 中的方法返回 JSX？

【英文标题】：How to return JSX from a method in React?

【发布时间】：2020-06-03 01:27:51

【问题描述】：

我是 React 的新手，我正在尝试从一个方法返回一个 JSX，代码如下：

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


const formatName = (user) => 
    return user.firstName + ' ' + user.lastName;


const getGreeting = (user) => 
    if (user) 
        return greeting
    
    else 
        return forbidden
    


const user = 
    firstName: 'John',
    lastName: 'Smith'
;

const greeting = (
    <h1>Hello formatName(user)</h1>
);

const forbidden = (
    <h1>Hello stranger!</h1>
);

const element = (
    <div>getGreeting(user)</div>
);

ReactDOM.render(
    element, document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如您所见，element 包含一个我希望渲染的 div getGreeting，因为user == true，它应该返回greeting，它调用方法formatName。但是它返回一个错误：

Error: Objects are not valid as a React child (found: object with keys greeting). If you meant to render a collection of children, use an array instead.

我在这里做错了什么？

【问题讨论】：

如果您发现任何答案有帮助 - 请接受一个作为正确答案。

【参考方案1】：

getGreeting 应该返回一个 JSX 而不是一个对象

试试这个：

const greeting = (
    <h1>Hello formatName(user)</h1>
);

const forbidden = (
    <h1>Hello stranger!</h1>
);

const getGreeting = (user) => 
    if (user) 
        return greeting
    
    else 
        return forbidden
    

【参考方案2】：

将return greeting 更改为return greeting，不带括号。

【参考方案3】：

在 javascript 中，当你编写时：

return greeting

...您的意思是“返回一个对象，该对象具有名为 'greeting' 的属性，该属性设置为变量 greeting 的值”

设置值的最后一部分是 ES6 快捷方式，为了简洁起见，基本上用 greeting 替换了 "greeting": greeting 。

换句话说，您当前正在返回一个具有单个属性“greeting”的对象，这基本上就是您的错误消息所说的内容。 你返回的是：

    "greeting": <h1>Hello ... </h1>

你要返回的是：

<h1>Hello ... </h1>

由于您的 greeting const 是有效的 JSX，您可以直接返回它！即return greeting;