如何使用 React Spring 更改图标？答案

【问题标题】：How to change icons with React Spring?如何使用 React Spring 更改图标？
【发布时间】：2020-02-22 18:32:06
【问题描述】：

当我点击它时，我想更改图标。例如，当我点击“????”时，它会变成“????”。在react spring的文档中，可以使用transition props来实现，但是如何使用onClick来切换呢？

https://www.react-spring.io/docs/props/transition

以下代码由react spring提供

<Transition
  items={toggle}
  from={{ position: 'absolute', opacity: 0 }}
  enter={{ opacity: 1 }}
  leave={{ opacity: 0 }}>
  {toggle =>
    toggle
      ? props => <div style={props}>????</div>
      : props => <div style={props}>????</div>
  }
</Transition>

【问题讨论】：

标签： javascript css reactjs react-spring

【解决方案1】：

创建一个按钮并在点击时更改toggle 值：

function App() {
  const [toggle, setToggle] = React.useState(false);
  return (
    <>
      <button onClick={() => setToggle(!toggle)}>toggle</button>
      <Transition
        items={toggle}
        from={{ position: "absolute", opacity: 0 }}
        enter={{ opacity: 1 }}
        leave={{ opacity: 0 }}
      >
        {toggle =>
          toggle
            ? props => <div style={props}>?</div>
            : props => <div style={props}>?</div>
        }
      </Transition>
    </>
  );
}

【讨论】：