无法更改React-tilt默认选项不起作用

Question

我正在设计一个博客，我想使用react-tilt来获得优质且令人难以置信的体验，好吧，一切正常，倾斜有效，效果有效，但我想更改默认选项，例如最大倾斜旋转
我尝试了什么？
在默认文档中，我需要设置defaultOptions，正如您所看到的，我将其放入代码中，但仍然没有任何更改，改变或更改defaultOptions的任何值，什么也没有
好了，你有我的代码：

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

谢谢！！

Answer 1

您需要：

<Tilt options={defaultOptions}  ...

与

options={{defaultOptions}}

相反。双大括号意味着您没有将选项对象直接传递给

<Tilt>

。相反，您正在创建一个计算结果为

{ defaultOptions: default options}

的对象并将其传递给

options

属性。

它期望直接传递选项对象。