將模板中的道具傳遞給react.js根節點

我可能錯過了一些東西，但是在這裏。如果我有：將模板中的道具傳遞給react.js根節點

var Swoosh = React.createClass({ 
    render: function() { 
    return (
     <div className="swoosh"> 
     Boom. 
     </div> 
    ); 
    } 
}); 

React.renderComponent(
    <Swoosh />, 
    document.getElementById('content') 
);

我可以設置props作爲掛載點（其中id='content'）屬性？

<div id='content' foo='alice' bar='has' bav='a cat' /> 
<!-- have foo, bar & bav available as props in <Swoosh />? -->

來源

2014-02-06 maligree

不同意，但你當然可以這樣做：

var container = document.getElementById('content'); 
React.renderComponent(
    <Swoosh 
    foo={container.getAttribute('foo')} 
    bar={container.getAttribute('bar')} 
    bav={container.getAttribute('bav')} />, 
    container 
);

（或者，如果你想使一個屬性字典使用類似https://stackoverflow.com/a/5282801/49485，那麼你可以做Swoosh(attributes)）。

來源

2014-02-06 00:57:41

我接受了其他的答案，但我覺得這一個應該得到一樣多的代表。謝謝！ – maligree

我寫了Mixin作爲練習。它可行，但我認爲Ben的答案從長遠來看是更好的建議。 Mixin將您從DOM橋接到React中，但如果您始終使用所有React，則您會有更輕鬆的時間。 –

這個問題看起來像一個trival測試案例，這個解決方案會更好。但是，這不是一個好的答案，因爲它要求您事先知道每個組件都需要什麼。如果你想將它抽象爲一個效用函數呢？你無法預測屬性會是什麼，這會鼓勵創建大量的樣板來傳遞任意屬性。 – pho3nixf1re

API中沒有任何東西將屬性從純DOM元素傳遞到React組件，但是您可以創建一個Mixin來完成它。需要注意的是，因爲它使用setProps這隻會傳遞給renderComponent組件上運行：

（Working JSFiddle）

var InheritsDomAttributes = { 
    componentDidMount: function(rootNode) { 
    var hasNextProps = false; 
    var nextProps = {}; 
    var parentNode = rootNode.parentNode; 

    Object.keys(parentNode.attributes).forEach(function(key) { 
     var namedNode; 

     // NamedNodeMaps have an attribute named "length" that 
     // should not be considered a set attribute. 
     if (key !== "length") { 
     hasNextProps = true; 
     namedNode = parentNode.attributes[key]; 
     nextProps[namedNode.name] = namedNode.value; 
     } 
    }); 

    if (hasNextProps) this.setProps(nextProps); 
    } 
}; 

var Swoosh = React.createClass({ 
    mixins: [InheritsDomAttributes], 
    render: function() { 
    return (
     <div className="swoosh"> 
     Boom. 
     </div> 
    ); 
    } 
}); 

React.renderComponent(
    <Swoosh />, 
    document.getElementById('content') 
);

來源

2014-02-06 00:59:44

也很高興知道mixin不支持es6。 – Smalbil

將模板中的道具傳遞給react.js根節點

回答

相關問題