停止道具被傳遞給帶風格元件的兒童

我第一次玩styled-components，並且我正在與僅用於風格元件本身的道具傳遞問題。停止道具被傳遞給帶風格元件的兒童

這裏是我的組件：

import { Link } from 'react-router-dom'; 

const CtaButton = styled(Link)` 
    background: ${props => props.primary ? 'red' : 'yellow'} 
    color: white; 
    display: inline-block; 
    padding: 0.5em 1em; 
`;

當我調用這個與primary道具，我從react是我申請的primary道具的<a />元素警告。我明白爲什麼會發生這種情況 - 但我該如何阻止它呢？

我當然可以在react-router的Link組件上創建一個包裝，以剝離此道具 - 但這樣做會很笨拙。我相信這只是我在這個庫的API中不是一個專業人士 - 所以有人可以請我指出正確的方向嗎？

由於某種原因，當我直接創建DOM組件時（例如styled.a），我沒有這個問題。

來源

2017-07-17 Kris Selbekk

看起來像this is a known limitation的styled-components。這不起作用的原因是因爲該庫在應用於DOM元素（基於白名單）時剝離了道具。對於組件來說，這不能真正做到，因爲一個隨機組件並不真正具有可預測的API。

雖然作者和貢獻者解決這個，這是變通，我想出了：

import React from 'react'; 
import { Link } from 'react-router-dom'; 

const StyledLink = ({ primary, ...rest }) => <Link {...rest} />; 

export const CtaButton = styled(StyledLink)` 
    background: ${props => props.primary ? 'red' : 'yellow'} 
    color: white; 
    display: inline-block; 
    padding: 0.5em 1em; 
`;

換句話說，包裝與其他組件的組件，無論風格的組件特定的道具，然後帶重新應用其餘的道具。這並不漂亮，但據我所知，這是最簡單的解決方案。

您還可以創建一個HOC會爲你做這個：

const withStrippedProps = propsToRemove => TargetComponent => (props) => { 
    const strippedProps = Object.entries(props) 
    .filter(([key]) => !propsToRemove.includes(key)) 
    .reduce((stripped, [key, value]) => ({ ...stripped, [key]: value }), {}); 
    return <TargetComponent {...strippedProps} /> 
}; 

const StyledLink = withoutProps(['primary'])(Link); 
const CtaButton = styled(StyledLink)` 
    // css goes here 
`;

我接受這個的答案了，但如果有不創建一個包裝組件的任何其他方法/這樣的功能，我會接受另一個答案。

來源

2017-07-17 11:53:41

停止道具被傳遞給帶風格元件的兒童

回答

相關問題