小编cts*_*cts的帖子

小组件看起来像这样：

// @flow
import ReactMarkdown from "react-markdown";
import type { Node } from "react";

function LinkRenderer(props: any) {
  return (
    <a href={props.href} target="_blank" rel="noreferrer">
      {props.children}
    </a>
  );
}

type Props = {
  children: Node,
};

const MarkdownRenderer = ({ children }: Props) => {
  return (
    <ReactMarkdown components={{ link: LinkRenderer }}>
      {children}
    </ReactMarkdown>
  );
};

谁能建议为什么我的链接在使用此组件时无法在新选项卡中打开？

像在其他组件中一样实现该组件：

<MarkdownRenderer>{value}</MarkdownRenderer>

我有一个导航组件，由一个细长的横幅（应该隐藏在滚动方向上）和一个主导航组成，然后应该粘在顶部并缩小。

我遵循了有关使用 Intersection Observer: Event to detector whenposition:sticky is触发的流行答案

但该解决方案的问题是，我的子元素（flex）在隐藏和显示的粘性横幅之间移动时会导致闪烁。由于明显的原因，我无法删除这些子元素，因此我选择使用 a 来删除这些position: fixed子main-nav元素top: 40px。这意味着瘦横幅会根据需要滚动，但我需要帮助使用 Javascript 获取滚动条位置，然后添加一个类似的类（.isSticky当瘦横幅不再存在时，以确保主导航粘在顶部）。

.isSticky {
 top: 0;
 height: 66px;
}

.isSticky {
 top: 0;
 height: 66px;
}

body { 
 margin: 0;
 height: 200vh;  
}

.skinny-banner{
  background: lightblue;
  height: 40px;
  display: flex;
}

.nav-menu {
  display: flex;
}

.sticky-nav{
  position: fixed;
  top: 40px;                    


  background: salmon;
  transition: .1s;
}

/* styles for when the header is in sticky mode */
.sticky-nav.isSticky{ …

我知道过去在各种问题中都涵盖了在 React 文本输入中添加图标的问题（例如： https: //stackoverflow.com/a/43723780/5968663），但我找不到解决这个问题的问题我的问题：

.wrapper {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.icon {
  height: 1.5rem;
  width: 1.5rem;
  background-color: red;
  padding: 4px;
}

.input {
  height: 50px;
}

<div class="wrapper">
  <div class="icon"></div>
  <input class="input"></input>
</div>  

我创建了一个包装器并尝试将flex图标放置在输入的“内部”（左侧） - 但我一直无法找到解决方案。谁能看出我哪里可能出错了？

我目前正在根据值渲染两个不同的组件shouldRenderPlanA- 然而，尽管渲染了不同的组件（取决于值） - 我传递了两个相同的道具。我怎样才能压缩它以减少重复的代码？

return (
  <>
    {options.map(option)}
    <StyledRow>
      {variousOptions.map((opt) => (
        shouldRenderPlanA ? (
          <StyledLabelOptionOne
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        ) : (
          <StyledLabelOptionTwo
            variousProps={variousProps}
            variousProps={variousProps}
            variousProps={variousProps}
          />
        )
      ))}
    </StyledRow>
  </>
);