React無狀態功能組件defaultProps函數

React 0.14引入stateless functional components。React無狀態功能組件defaultProps函數

，你還可以通過在功能

不過，我想初始化道具之一爲隨機值（每個實例），如果它沒有設置將它們設置爲屬性指定.propTypes和.defaultProps。我不能這樣做，如果defaultProps只接受一個對象。有沒有辦法使用函數來初始化它，還是我必須創建一個完整的React組件？

來源

2016-09-13 mpen

只要把'var value = props.value || randomValue（）;'在你的函數中？ –

@FelixKling如果不重新實例化組件，是不可能更改道具的？因爲如果組件被重新渲染，我希望它使用相同的值。但是，如果無狀態的功能組件從未被重新渲染，那就沒問題了。 – mpen

完成此操作的最簡單方法是將默認道具設置爲隨機值，如Andrew所述。

Component.defaultProps = { 
    someProp: randomValue 
}

如果它被設置，這個默認值會被覆蓋，所以它適用於你描述的行爲。

如果您想使用函數設置默認值，則它基本上是相同的賦值。

Component.defaultProps = { 
    someProp = fxnRandomValue() 
}

編輯：

，以確保所有情況下真正的隨機道具這種的價值，我建議你跳過設置默認乾脆託，做組件內的分配。例如。

const statelessComp = ({ prop }) => { 
    prop = prop || fxnRandomValue(); 
    return (
    ... 
) 
}

來源

2016-09-13 23:39:31 Cent

對不起，我不認爲我很清楚。我想要每個實例的隨機值。第一次渲染組件後，該值不會改變，但每個實例都需要自己的唯一值。我很確定你的解決方案將爲所有實例創建一個值。 – mpen

不一定。這取決於你的隨機函數的工作方式。每當函數想要創建每個實例時，都會調用defaultProps。但是，如果您擔心在其他地方可能不是隨機的，您可以選擇在該功能內進行分配。 – Cent

'prop = prop || fxnRandomValue（）'會導致它在每次重新渲染時獲得不同的隨機值，不是嗎？它應該在第一次實例化之後進行修復。另外'Component.defaultProps'是一個靜態屬性，而不是一個函數，所以它不會被「調用」。 – mpen

如果使用recompose庫，可以實現這樣一個解決方案：

import { withState } from "recompose"; 

var enhance = withState("someProp", "updateSomeProp", (props) => props.someProp || randomValue()); 
var MyComponent = enhance(function(props) { 
    // This is your stateless component. 
    return <div>{props.someProp}</div>; 
});

這基本上創建一個包含狀態的包裝組件。如果someProp未定義，則狀態將使用隨機值進行初始化。

來源

2016-09-14 03:23:35

React無狀態功能組件defaultProps函數

回答

相關問題