如何在react js中渲染或创建新元素

Question

所以我想做一个程序，我可以在react js中创建或创建新的元素在点击我尝试了一些事情，但它给了我一些错误

import React from 'react'
import { ReactDOM } from 'react'
export default class Create extends React.Component{
render(){
ReactDOM.render(<h1>Hello</h1>,document.getElementById('box'))
return(
<>
<div id='box'></div>
</>
)
}
}

这就是我试图做的，我试图在box元素中添加一个新的HEADING元素，但它给了我一些错误
我是新的反应，所以我为一些新手错误感到抱歉

Answer 1

有很多方法可以实现这个行为。

一种方法是跟踪一个Integer，您将为其呈现一个Element (header)。然后按下一个按钮将增加数字，所以一个新的被渲染。

同样的想法可以通过使用数组，对象等来实现…

---

使用简单整数的例子:

const { useState } = React;
const Heading = (props) => {
return <h3>{'Header: #' + (props.id + 1)}</h3>;
}
const Example = () => {
const [num, setNum] = useState(1);

const bumpNum = () => setNum(num + 1);
return (
<div>
<h1 onClick={bumpNum}>{'Press me to bump!'}</h1>
{Array(num).fill().map((_, i) => <Heading id={i} />)}
</div>
)
}
ReactDOM.render(<Example />, document.getElementById("react"));

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