Question

我在构建一个React应用程序时遇到了一个问题，即如何根据useState在另一个react元素中创建react元素？

我创建了一个简化的示例：

import React, { useState } from 'react';
import Square from './square';

function Chart(props) {

    const [counter, setCounter] = useState(0);

    function increment() {
        setCounter++;
    }

    return (
        <div>
            <button onClick={increment()}>More squares</button>
            <div className="container">
                {
                    //I want to create as much <Square number={counter}/>  as the value of counter
                }
            </div>
        </div>
    );
}

export default Chart;

Answer 1

创建一个数组。例如：

function Chart(props) {
    const [counter, setCounter] = useState(0);

    function increment() {
        setCounter(oldCounter => oldCounter + 1);
    }

    const squares = [];
    for (let i = 0; i < counter; i++) {
      squares.push(<Square number={i} key={i}/>)
    }

    return (
        <div>
            <button onClick={increment}>More squares</button>
            <div className="container">
                {squares}
            </div>
        </div>
    );
}

Answer 2

您可以看看lodash。有一个函数times，它会n次调用一个函数。

import times from 'lodash/times'
...

function Chart(props) {

...
    return (
        <div>
            <button onClick={increment()}>More squares</button>
            <div className="container">
                {times(counter, idx => (<Square key={idx} number={counter}) ) />}
            </div>
        </div>
    );
}

如果您不想导入整个库，也可以自己编写此函数。

Answer 3

import React, { useState } from 'react';
import Square from './square';

export default function Chart(props) {

const [counter, setCounter] = useState(0);

function increment() {
    setCounter++;
}    

return (
    <div>
        <button onClick={increment()}>More squares</button>
        <div className="container">
            {
               createSquares(counter)
            }
        </div>
    </div>
  );
}

function createSquares(counter){
   const squares = [];
   while(counter){
     squares.push( <Square number={counter} key={counter}/> );
     counter--;
   }
   return squares;
}

如何在另一个元素中创建react元素？

3 个答案: