时间戳

首页 > 解决方案 > 显示无时反应redux不渲染

reactjs - 显示无时反应redux不渲染

问题描述

我想在单击另一个 TR（父）时显示/隐藏一个 TR（详细信息）（例如展开/隐藏详细信息）。

但是当 TR 不可见时（显示：无），它永远不会回到可见状态。如果我让所有 TR 可见，我可以看到状态发生变化

在此示例中，我只想显示单击“父行”的“详细信息行”。我的代码：

表格渲染

 return (
        <Fragment key={"F"+i}>
          <BoardTableRow obj={res}        id={"id-"+i}        key={"P"+i} /> 
          <BoardDetailTableRow obj={res}  id={"detail-id-"+i} key={"D"+i} />
        </Fragment> 
      );

父级渲染

export function BoardTableRow(props) {

    const current = useSelector(selectCurrent);
    const dispatch = useDispatch();   

    return (
        <tr className={ (props.obj.isRented) ? 'color-red' : ''  } onClick={() => dispatch(lineClick(props.id))}>
            <td className="text-center">{props.obj.name} {current}</td> 
            <td className="text-center">{props.obj.category} </td>                           
            <td className="text-center">{ (props.obj.isRented) ? "não" : "sim"}</td>
            
        </tr>
    );

}

细节渲染

export function BoardDetailTableRow(props) {

    const current = useSelector(selectCurrent);
    let rowId = ("detail-"+current)

    let visible = (rowId == props.id ? 'visible' : 'none')
    let invisible = (rowId == props.id ? 'false' : 'true')


    // just to see if was right
    //visible = 'visible'
    let actual = (rowId == props.id ? 'YES' : 'NO') 

    
    return (
        <tr  style={{display:  visible }}>
            <td className="text-center" colSpan='3'>
                <p  wfd-invisible={invisible} style={{display: visible }}> {actual}  </p>
            </td>            
        </tr>
    );

}

如果我“取消注释”那个可见的片段visible = 'visible'，它会起作用：

在此处输入图像描述

怎么了？

标签： reactjsreduxreact-redux

解决方案

我认为它可能不会为您正确更新 CSS 样式。您是否尝试过进行条件渲染？如果visible为false，你可以只返回null，否则你会渲染组件的细节

export function BoardDetailTableRow(props) {
    const current = useSelector(selectCurrent);
    let rowId = ("detail-"+current)

    let visible = (rowId == props.id ? 'visible' : 'none')
    let invisible = (rowId == props.id ? 'false' : 'true')

    let actual = (rowId == props.id ? 'YES' : 'NO') 

    if (!visible) {
        return null;
    }

    return (
        <tr>
            <td className="text-center" colSpan='3'>
                <p  wfd-invisible={invisible} style={{display: visible }}> {actual}  </p>
            </td>            
        </tr>
    );

}

推荐阅读