React-tilt默认配置无法修改问题求助

你传递配置时犯了个小错误——把defaultOptions包在了额外的对象里，导致react-tilt没正确读取到参数。

修复步骤 #

把组件里的：

<Tilt options={{defaultOptions}} className="blogs" 
style={{border: `3px dashed ${rand}`, background: `${rand + "1c"}`}}>

改成：

<Tilt options={defaultOptions} className="blogs" 
style={{border: `3px dashed ${rand}`, background: `${rand + "1c"}`}}>

修改后的完整代码 #

import React from 'react'
import { deleteBlogRequest } from '../../api/blosg.api'
import { useBlogs } from './BlogContext'
import { Link, useNavigate } from 'react-router-dom'
import { Tilt } from 'react-tilt'

const defaultOptions = {
    reverse:        false,  // reverse the tilt direction
    max:            1,     // max tilt rotation (degrees)
    perspective:    2000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:          1.1,    // 2 = 200%, 1.5 = 150%, etc..
    speed:          1000,   // Speed of the enter/exit transition
    transition:     false,   // Set a transition on enter/exit.
    axis:           null,   // What axis should be disabled. Can be X or Y.
    reset:          true,    // If the tilt effect has to be reset on exit.
    easing:         "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
}

function Blogcard({ e }) {

  const {handleDelete} = useBlogs()
  const colors = ["#018aff", "#ff7c01", "#01ff56"]
  var rand = colors[Math.floor(colors.length * Math.random())]

  return (
    <>
    <Tilt options={defaultOptions} className="blogs" 
    style={{border: `3px dashed ${rand}`, background: `${rand + "1c"}`}}>
      <div onClick={() => window.location.href = `/post/${e.id}`}>
        <img src={e.image}/>
        <h1>{e.post}</h1>
        <h2>{e.name}</h2>
        <p><small>{e.createAt}</small></p>
      </div>
        {/* <button onClick={() => handleDelete(e.id)}>eliminar</button> */}
      </Tilt>
    </>
  )
}

export default Blogcard

原因说明 #

原来的{{defaultOptions}}写法等价于创建了一个新对象{ defaultOptions: defaultOptions }，react-tilt会尝试读取options里的配置项，但你的参数都嵌套在defaultOptions属性里，组件根本识别不到。直接传递defaultOptions变量，组件就能正确读取你设置的最大倾斜角度、缩放比例等参数了。

内容的提问来源于stack exchange，提问作者mini1012