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

【问题标题】：How to return JSX from a method in React?如何从 React 中的方法返回 JSX？
【发布时间】：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.

我在这里做错了什么？

【问题讨论】：

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

标签： javascript reactjs

【解决方案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;

【讨论】：