我试图在一个react组件中使用reactMarkDown渲染一些链接，该组件需要传递一些道具来使用特殊样式。
links是我的样式组件，我正在将其应用于reactmarkdown中renderers下的paractor属性。 但是，links要工作，我需要传递linkcolor={linkcolor}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，它正在应用于一个上？ 这里的LinkRender是另一个定制的样式组件，它是，我不能更改它。
一种有效的方法是将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;
}
`;
这只是一个行之有效的解决方案。 我在等待别人提供更好的解决方案。
