如何使用 for 循环呈现多个文本输入？

Question

我试图在一个 for 循环中在屏幕上显示 5 个输入字段。我还想稍后（根据它们的状态）对它们中的每一个应用动态 class 。这是我的代码：

function App() {
    ...

    return (
        <Grid container className={classes.root}>
            <CssBaseline />
            <Grid item xs={false} md={7} className={classes.image} />
            <Grid item xs={12} md={5} component={Paper} elevation={6} square>
                <div className={classes.paper}>
                    <form className={classes.form} onSubmit={handleSubmit}>
                        {inputFields}
                        for (let i = 0; i < 5; i++) {
                            <TextField />
                        }
                        {for (let i = 0; i < 5; i++) {
                            <TextField />
                        }}
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                        >
                            Submit
                        </Button>
                    </form>
                </div>
            </Grid>
        </Grid>
    );
}

这是我收到的错误：SyntaxError: Unexpected token.

我还在学习 React，所以我很确定我做错了。如何使用 for 循环渲染多个元素？有没有更好的方法？

谢谢！

Answer 1

您不能将 javascript 代码放在 JSX 声明中。您必须使用 {} 来表示用于生成 JSX 的任何 javascript 代码。

只要将它放在大括号中，就可以使用类似这样的东西代替 for 循环。

 new Array(5).fill().map(() => <TextField/>)

最终结果：

function App() {
    ...

    return (
        <Grid container className={classes.root}>
            <CssBaseline />
            <Grid item xs={false} md={7} className={classes.image} />
            <Grid item xs={12} md={5} component={Paper} elevation={6} square>
                <div className={classes.paper}>
                    <form className={classes.form} onSubmit={handleSubmit}>
                        {new Array(5).fill().map(() => <TextField/>)}
                        <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            color="primary"
                            className={classes.submit}
                        >
                            Submit
                        </Button>
                    </form>
                </div>
            </Grid>
        </Grid>
    );
}

Answer 2

我们必须嵌入一些 JS 代码，这些代码 return 是一些 JSX 或 JSX 数组。

{new Array(5).fill().map((_) => (
      <TextField/>
      ))}

此代码创建一个包含 5 undefined 个元素的数组。然后，.map return 是一个数组，其中每个 undefined 元素都转换为 <TextField/>。

因此我们 return 一个 JSX 数组。

我认为它不起作用的主要原因是 for 循环没有 return JSX。

如何使用 for 循环呈现多个文本输入？

How can I render multiple text inputs with a for loop?

javascript

reactjs

jsx