将 props 传递给 ReactMarkdown 样式组件的语法答案

【问题标题】：Syntax for passing props to ReactMarkdown styled component将 props 传递给 ReactMarkdown 样式组件的语法
【发布时间】：2020-10-28 20:38:05
【问题描述】：

我正在尝试在 React 组件中使用 ReactMarkdown 呈现一些链接，这需要传递一些道具以使用特殊样式。

Links 是我的样式化组件，我将其应用于ReactMarkdown 中renderers 下的paragraph 属性。但是Links 工作我需要通过linkColor={linkcColor} props。

代码：我的部分代码是Container 是另一个styled.div

 <Container>
    {websites.map((website, index) => (
      <div key={'website' + index}>
        <ReactMarkdown
          source={`[${website.websiteName}](${website.externalUrl})`}
          unwrapDisallowed={true}
          renderers={{ paragraph: Links, link: Linkrender }}
        />
      </div>
    ))}
  </Container>

  const Links = styled.div`
   color: ${(p) => p.linkColor};

   ::before {
     content: ' ';
     white-space: pre;
   }

   ::after {
      content: '  /';
      white-space: pre;
   }
  `;

尝试过：以下。但它没有奏效。它完全失去了ReactMarkdown 的source，而只是将style 应用于空的div。

 <ReactMarkdown
          source={`[${website.websiteName}](${website.externalUrl})`}
          unwrapDisallowed={true}
          renderers={{ paragraph: ({linkColor}) => (
                         <Links {...linkColor={linkColor}} />),  <<<<<<<<<<<<< tried this
                       link: Linkrender }}
        />

语法正确吗？这不起作用的原因可能是什么？是因为我的样式组件是div，它被应用在<p> 上吗？这里Linkrender 是另一个定制的样式组件<a>，我无法更改。

【问题讨论】：

标签： css reactjs markdown

【解决方案1】：

一种可行的方法是应用styled.div 作为包装器，并将特定样式应用于ReactMarkdown 中的paragrah。查看代码中的箭头，说明该做什么。

  <Container>
    <Heading>{`${textStripeHeading}:`}</Heading>
    {websites.map((website, index) => (
      <Links key={'website' + index} linkColor={linkColor}>     <<<<<<<<<<< add <Links> here
        <ReactMarkdown
          source={`[${website.websiteName}](${website.externalUrl})`}
          unwrapDisallowed={true}
          renderers={{ paragraph: MarkdownStyle, link: Linkrender }}   <<<<<<<<< create new style.p with style and apply to paragraph
        />
      </Links>
    ))}
  </Container>

   const MarkdownStyle = styled.p`
      ::before {
        content: ' ';
        white-space: pre;
      }

     ::after {
      content: '  /';
      white-space: pre;
     }
   `;

这只是一种有效的解决方案。我正在等待其他人提供更好的解决方案。

【讨论】：