Reactjs “为什么我不能渲染”；“你好”；从我的jsx中的函数？_Reactjs

Reactjs “为什么我不能渲染”；“你好”；从我的jsx中的函数？

reactjs

Reactjs “为什么我不能渲染”；“你好”；从我的jsx中的函数？,reactjs,Reactjs,我需要在单击元素时呈现一些html，这是非常简单的东西，但我是新手，所以需要帮助任何人。我有这个函数，它返回一些jsx，我不会在单击事件时渲染它在这个例子中，我应该在li下得到“Hello”，并带有一个链接类这是我的密码 const returnSomething = () => { return ( <h1>Hello</h1> ); }; return ( <di

我需要在单击元素时呈现一些html，这是非常简单的东西，但我是新手，所以需要帮助任何人。我有这个函数，它返回一些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>
    );

const returnSomething=（）=>{
返回(
你好
);
};
返回(



returnSomething（）}>选择器
{returnSomething}

);

试试这个

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

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

const[show，setState]=useState（false）；
const returnSomething=（）=>{
如果（显示）{
返回希洛；
}
返回null；
};
setState（！show）}>单击此处{returnSomething（）}

试试这个

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

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

const[show，setState]=useState（false）；
const returnSomething=（）=>{
如果（显示）{
返回希洛；
}
返回null；
};
setState（！show）}>单击此处{returnSomething（）}

您的代码有几个问题

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

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

那没什么用。您所做的只是执行函数，但是JSX会在

onClick

处理程序中返回：

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

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

这意味着返回的JSX不会发生任何变化。它不会被渲染，因为它返回到

onClick

然后还要编写以下代码：

{ returnSomething }

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

另外，

onClick

处理程序未连接到您要返回的函数

我的意思是：

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

与此无关：

{ returnSomething }

他们没有联系。因此，在

onClick

内执行

returnSomething

不会影响正在返回的

returnSomething

要有条件地呈现某些内容，需要使用state。

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>
    )
}

例如：

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>
    )
}

const组件=（）=>{
const[isTextVisible，setIsTextVisible]=useState（false）
返回(


setIsTextVisible（true）}>
选择器

{isTextVisible&&Hello}

)
}

最初，

isTextVisible

值为

false

，因此

h1

不会呈现。但是，当您单击

li

时，

onClick

处理程序调用

setIsTextVisible（true）

，这意味着现在

isTextVisible

是

true

，因此呈现

h1

标记。