React未在onClick按钮中呈现jsx

Question

我刚开始学习反应，一直心存疑虑。我有一个简单的按钮，点击该按钮后，我想添加一些文本(或任何其他html(元素。控制台日志语句正在执行，但是div标记没有被rednered。这是我的以下代码。

function App() {
const executeMe = () => {
console.log("executed")
return(
<div> Clicked here</div>
)
}
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className="App">
Hello world
<Button onClick={executeMe}> click me</Button>

</div>
</LocalizationProvider>
);
}
export default App;

我知道我错过了一些可能很简单的事情。请帮我解决这个问题。感谢

Answer 1

您错误地看待React，它不会以这种方式工作。你可以这样做。

import { useState } from "react";
function App() {
const [clicked, setClicked] = useState(false);
const [lines, setLines] = useState([]);
const executeMe = () => setClicked(!clicked);
const onAddLine= () => setLines(lines.concat("New line (Could be unique)"));
return (
<div className="App">
Hello world
{/* METHOD A */}
{!clicked && <button onClick={executeMe }>Click me</button>}
{clicked && <div>Clicked here</div>}
<br />
{/* METHOD B */}
<button onClick={executeMe}>{clicked ? "Clicked here" : "Click me"}</button>
<br />
{/* ADDITIONAL FUN STUFF WITH SEPERATE BUTTON */}
<button onClick={onAddLine}>Add new line</button>
<br />
{lines.map((line, x) => {
return(
<div key = {x}>{x+1} : {line}</div>
);
})}
</div>
);
};
export default App;

Answer 2

您可以使用state来渲染该div，并在下次单击时重置它。

function App() {
const [showDiv, setShowDiv] = useState(false);
const executeMe = () => {
console.log("executed");
setShowDiv(!showDiv);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className="App">
Hello world
<Button onClick={executeMe}> click me</Button>
{showDiv && <div> Clicked here</div>}  {/* render div once showDiv state is true */}
</div>
</LocalizationProvider>
);
}
export default App;

Answer 3

您应该添加一个状态值来检查按下按钮的时间。以下是有关如何使用useState钩子的更多信息。

function App() {
const [isButtonPressed, setIsButtonPressed] = useState(false);
const executeMe = () => {
console.log("executed");
setIsButtonPressed(true);
}
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className="App">
Hello world
<Button onClick={executeMe}> click me</Button>
{isButtonPressed && <div>Clicked here</div>}
</div>
</LocalizationProvider>
);
}
export default App;

Answer 4

有很多方法可以实现这一点。First React只是JavaScript，大多数JS代码将在组件中工作。但有些开发人员可能会发现它是not so React，这对我来说很奇怪：(

下面是两个你可以尝试的例子：

function App() {
const [list, setList] = React.useState([])
const handleAddLine = () => {
const lists = document.getElementById('lists')
const li = document.createElement('li')
li.textContent = 'hey'
lists.append(li)
}
const handleAddLineReactish = () => {
setList(prevList => {
return prevList.concat(<li>hey</li>)
})
}
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<button onClick={handleAddLine}>Add</button>
<ul id='lists'></ul>
<button onClick={handleAddLineReactish}>Add Reactish</button>
<ul>
{list.length > 0 && list.map((l, i) => {
return (
<li key={i}>{l}</li>
)
})}
</ul>
</div>
);
}

沙箱URL:https://codesandbox.io/s/funny-sun-7f4epn?file=/src/App.js

Answer 5

对于这样的东西，我们使用一个名为"useState"；。在"；useState"；我们储存一些东西，并在此基础上做一些事情，比如展示、隐藏等等。

---

查看图像

Answer 6

您可以在另一个组件中编写html代码，并将其导入到当前文件中。您可以使用state来检查值是否"可见"，并键入"true/false"来检查单击按钮时的状态。

代码示例

import React, { useState } from "react";
function App() {
const [showText, setShowText] = useState(false);
const executeMe = () => {
console.log("executed")
setShowText(true);
}
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<div className="App">
Hello world
<Button onClick={executeMe}> click me</Button>
{showText ? <Text /> : null}

</div>
</LocalizationProvider>
);
}
const Text = () => <div>You clicked the button!</div>;
export default App;