ReactJS 从我的自定义表中向特定行添加数据

Question

我的应用程序中有一个表，我在其中使用循环呈现行。现在，我遇到了将数据插入特定行的问题。

我在我的应用程序中的想法是，我有一个循环来呈现我的表的 31 行，每次用户单击特定行时，都会显示一个模式，让用户输入一些数据，我想要返回数据到用户点击并插入到 <td> 的特定行来自特定行的标签。

这是我到目前为止所做的:

这是我要放置一些数据的行组件:

const Date_columns = (props) => {
        const [hovered, setHovered] = useState(false);      

        const toggleHover = () => {
            setHovered((prevState) => (!prevState));            
        }        
        
        return (
            <>
              <tr onClick={() => handleShowModal(selectedMY, props.date_column)} onMouseEnter={toggleHover} onMouseLeave={toggleHover} className={hovered ? `${classes.trHover}`:''}>
                  <td align="center" className={`${classes.borderBlack}`}>{props.date_column}</td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
              </tr>
            </>
        )
    }

下面是我如何渲染我的行:

{(() => {
    const rows = [];
    for (let i = 1; i <= 31; i++) {
        rows.push(<Date_columns key={i} date_column={i} />);
    }
    return rows;
})()}

如何根据键或 date_column 设置仅从特定行插入的条件 Prop ？

Answer 1

对于您的用例，您可以在 for 循环中使用三元运算符，例如:

{(() => {
    const rows = [];
    for (let i = 1; i <= 31; i++) {
        i = "1" ? rows.push(<Date_columns key={i} date_column={i} />) : rows.push(<Date_columns key={i} />) 
    }
    return rows;
})()}

检查 i 的值并基于此呈现您的 <Date_column>组件。