react-show-more-text扩展字段无法动态工作

问题描述

大家好，共有3个段落，他们正试图动态控制展开按钮onClick的显示更多。我正在使用此npm软件包https://www.npmjs.com/package/react-show-more-text

  const thexecuteOnClick = (isExpanded,setIsstyleKey,key) => {
    if (isExpanded) {
      setIsstyleKey(key);
    } else {
      setIsstyleKey(null);
    }
  };

  return (
    <div
      style={{ backgroundColor: "rgb(27,20,100,0.3)",height: 550 }}
    >
      <div className="row">
        <div className="col-md-1"></div>
        {items.map((item,key) => {
          return (
            <div
              className={isstyleKey === key ? "show-more col-md-4" : "col-md-3"}
              style={{ textAlign: "center",fontSize: 12 }}
              key={key}
            >
              <ShowMoreText
                lines={8}
                more="Show more"
                less="Show less"
                anchorClass=""
                onClick={(isExpanded) =>
                  thexecuteOnClick(isExpanded,key)
                }
                expanded={key != isstyleKey ? false : true}
              >
                <span
                  dangerouslySetInnerHTML={{
                    __html: item,}}
                />
              </ShowMoreText>
            </div>
          );
        })}
      </div>
    </div>
  );
}

我做了console.log来检查那些不是当前密钥的扩展是否为false。看起来逻辑expanded={key != isstyleKey ? false : true}可以正常工作，但扩展的块永远不会返回到expand = {false}。基本上，当在一个块上单击show-more时，所有其他块都不应展开。

我是否缺少某些物品，或者包裹是否有可能？感谢您的帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）