为什么我不能从我的 jsx 中的函数渲染“Hello”？答案

【问题标题】：Why I cant render "Hello" from function in my jsx?为什么我不能从我的 jsx 中的函数渲染“Hello”？
【发布时间】：2020-04-01 10:43:58
【问题描述】：

单击元素时我需要渲染一些 html，这是非常简单的东西，但我是 React 新手，所以请帮助任何人。我有这个返回一些 jsx 的函数，我不会在点击事件时呈现它。

在这个例子中，我应该在 li 下得到一个带有链接类的“Hello”，

这是我的代码；

const returnSomething = () => {
        return (
            <h1>Hello</h1>
        );
    };

    return (
        <div>
            <div>
                <ul>

                </ul>
                <ul>
                    <li className="link" onClick={() => returnSomething()}>Selector</li>
                    { returnSomething }
                </ul>
            </div>
        </div>
    );

【问题讨论】：

您正在返回一个函数。您需要返回该函数的执行结果。此外，您的 onClick 不会像您认为的那样做。查看一些 React 条件渲染教程。
我从func返回h1元素，我不会在类名链接的li下显示h1，就这么简单！

标签： reactjs

【解决方案1】：

您的代码有几个问题。

你有一个返回一些 JSX 的函数：

const returnSomething = () => {
  return <h1>Hello</h1>
}

您正在使用 onClick 处理程序调用它：

<li className="link" onClick={() => returnSomething()}>

这没有任何作用。您所做的只是执行该函数，但 JSX 在 onClick 处理程序中返回：

onClick={() => // JSX gets returned here
  returnSomething()}>

这意味着您返回的 JSX 没有任何反应。它没有被渲染，因为它返回到了onClick。

那你也写如下代码：

{ returnSomething }

但是你没有执行函数，所以你试图在 JSX 中返回实际的函数对象。这不会渲染函数的结果。

另外，onClick 处理程序未连接到您要返回的函数。

我的意思是：

onClick={() => returnSomething()}>

与此无关：

{ returnSomething }

它们没有连接。所以在onClick 内执行returnSomething 不会影响您返回的returnSomething。

要有条件地渲染某些东西，你需要使用状态。 onClick 应该设置状态，例如：

例如：

const Component = () => {
    const [isTextVisible, setIsTextVisible] = useState(false)

    return (
        <div>
            <div>
                <ul></ul>
                <ul>
                    <li className="link" onClick={() => setIsTextVisible(true)}>
                        Selector
                    </li>
                    {isTextVisible && <h1>Hello</h1>}
                </ul>
            </div>
        </div>
    )
}

最初isTextVisible 的值为false，因此h1 将不会呈现。但是当你点击li时，onClick处理程序调用setIsTextVisible(true)，这意味着现在isTextVisible是true，因此h1标签被渲染。

【讨论】：

【解决方案2】：

试试这个

const [show, setState] = useState(false);
const returnSomething = () => {
    if (show) {
      return <h1>Heelo</h1>;
    }
    return null;
  };

<div onClick={() => setState(!show)}>Click here {returnSomething()}</div>

【讨论】：

但是这样它总是可见的，我不会只在点击事件之后显示它
你需要为此保持一些状态，要么使用类组件，要么使用函数组件中的useState钩子。
更新答案codesandbox

【解决方案3】：

你需要使用状态来完成你想要的（只有在按钮被点击时才渲染标记）。

function App() {

const returnSomething = () => <h1>Hello</h1>
const [isVisible, setIsVisible] = React.useState(false)

    return (
        <div>
            <div>
                <ul>

                </ul>
                <ul>
                    <li className="link" onClick={() => setVisible(true)}>Selector</li>
                    { isVisible && returnSomething() }
                </ul>
            </div>
        </div>
    );
}

【讨论】：

【解决方案4】：

可以根据状态变量添加，点击即可显示

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showText: false };
  }

  setText = () => {
    this.setState({ showText: true });
  };

  returnSomething = () => <h1>Hello</h1>;

  render() {
    return (
      <div>
        <div>
          <ul />
          <ul>
            <li className="link" onClick={this.setText}>
              Selector
            </li>
            {this.state.showText && this.renderSomething}
          </ul>
        </div>
      </div>
    );
  }
}

【讨论】：