嗨，我有一個這樣的組件：
const Comp = (props) => {
return(
<div>
data here
</div>
)
}
我想像這樣使用成幀器運動：
const Container = () => {
return(
<motion.Comp variants={variants} someProp="someProp"/>
)
}
我想這樣做的原因是我不認為將大量 div 作為包裝器是一個好主意。我可以在“Comp”組件中使用motion.div，但是我的一些應用程式組件不需要在我的整個應用程式中為它們設定影片。我只想要一個解決方案來向組件中的第一個元素添加影片。
我也搜索并找到了一個解決方案“motion(Comp)”，但它不起作用。
uj5u.com熱心網友回復：
從檔案 ( https://www.framer.com/docs/component/#custom-components ) 中，您可以包裝任何組件motion()以將其用作 framer-motion 組件。您提到您找到了該解決方案，但它不起作用，如果沒有關于它的更多詳細資訊，我無法給您具體的原因。但很可能你忘記了傳遞ref給你的組件，像這樣：
const Foo = React.forwardRef((props, ref) => <div ref={ref} />)
這ref是 framer-motion 將識別頁面上哪個元素是它應該影片的方式，因此需要將其傳遞給正確的元素。完成后，您可以使用以下內容包裝它motion：
const MotionFoo = motion(Foo)
請記住，無論您的自定義組件有多少個元素，只有ref傳遞給它的元素才會被影片化。例如：
const BusyFoo = React.forwardRef((props, ref) => (
<div>
<div ref={ref}>I will be animated!</div>
<div>I won't be animated. :(</div>
</div>
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/324377.html
下一篇：如何使用混合分隔符（即方括號、空格和雙引號）來決議日志（nginx/apacheaccess.log）？并可選擇轉換為json