我可以強迫孩子屬性嗎？

不是指魔術props.children，但是我可以強制一個子元素在其生成的頂級元素上擁有特定的屬性（或添加到屬性的值）嗎？示例方案：我可以強迫孩子屬性嗎？

const Button = 
    (props) => 
    (<button type="button" id={props.id} className={['btn'].concat(props.classNames)}>{props.children}</button>);

很想不必做classNames道具，讓家長額外動力類下降無子相互作用/參與/同意。

更好的是，如果它允許的東西，除了額外的CSS類，但這是目前的目標。

是否有可能在沒有他們知道的情況下對孩子這麼做？

來源

2016-12-07 Maslow

這可能有幫助：https：//www.amazon.com/Parenting-Dummies-Sandra-Hardin-Gookin/dp/0764554182 – jtbandes

這可能是你在找什麼（使用ES6蔓延運營商）：

const Button = (props) => (<button {...props}>{props.children}</button>);

它通過了所有道具that've已經對Button組件指定到<button>元素，所以在情況如果指定：

<Button className="my-class" id="10">submit</Button>

的<button>元素將得到：<button className="my-class" id="10" >submit</button>

更新：如果您只想傳遞一些道具而不是全部道具，那麼您可以考慮將對象分配給頂層組件，並將其用作子道具上的道具。

const Button = (props) => (<button {...props.data}>{props.children}</button>) 

<Button data={{ id: 10, className: 'my-class' }}>submit</Button>

來源

2016-12-07 16:49:30

因爲我總是看到這個例子（'{...道具}''帶着我從未使用過的神奇的'{props.children}'附錄，我一直認爲這與兒童有關。這太棒了，如果按照它的方式工作，讓我試試看。 – Maslow

感覺傳播運營商是過度殺傷，而窮人啓動，你不能使用黑名單，我敢打賭，你必須查找所有屬性，甚至不應該去孩子的孩子。我真的很希望能夠傳遞像parent-passed'data- *'屬性這樣的東西。或者將'classNames'合併到子女 – Maslow

，如果你需要過濾掉一些道具，你可以將過濾器應用到道具： –

您可以克隆使用React.cloneElement()每一個孩子，它允許你在你自己的道具合併...

React.Children.map(props.children, child => { 
    return React.cloneElement(child, { newProp: 1, otherProp: 'XYZ' }); 
});

...所以，你的可能是這個樣子：

const Button = (props) => { 
    const className = ['btn'].concat(props.classNames).join(' '); 

    <button type="button" id={props.id} className={className}> 
    { 
     React.Children.map(children, child => (
     React.cloneElement(child, { className }) 
    )) 
    } 
    </button> 
};

來源

2016-12-07 18:03:42

要回答您的問題，您可以使用{...this.props}或使用參考指令在父類的componentDidMount/componentDidUpdate中強制應用。

但是我真的試着不使用任何一種方法。 React的當前版本在DOM節點上設置未知屬性時會發出警告，並且{...this.props}會經常引導您。命令式方法也不好，因爲它打破了功能數據流，基本上使得使用React過時。

我真的會試着非常明確地說明你想從一個組件中獲得什麼樣的功能/外觀，並嚴格通過道具進行指定。這意味着還將className,style和其他屬性看起來微不足道。通常使用更多語義道具也是有幫助的： colorScheme="confirm"，size="big"，type="outline"是可用於Button組件的示例。這樣可以避免在多處使用按鈕時出現重複。

如果您告訴我更多關於您的具體使用案例，我認爲可能有一個很好的解決方案。

來源

2016-12-07 18:47:30 amann

我可以強迫孩子屬性嗎？

回答

相關問題