当前位置：文江博客话题详情

使用ReactJ在两个Div之间移动两个Div

发布于 2025-01-23 20:12:26 字数 107 浏览 2 评论 0原文

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

初雪 2025-01-30 20:12:26

它必须非常简单，您可以通过控制您的按钮的状态变量获得它。

const [option, setOption] = useState('1');

此状态变量选项将保持1或2，如果选择了1，则它将显示第一个内容部分，否则将显示第二个内容部分。

和onclick这些选项上的将更改state变量。

onClick={(e) => setOption('1')}

这是一个代码。 沙盒上的代码

import React, {useState} from 'react';

import "./styles.css";

export default function App() {
  const [option, setOption] = useState('1');
  return (
    <div className="App">
      <div className="option-wrap">
        <div className={`option ${option === '1'? 'selected' : ''}`} onClick={(e) => setOption('1')}>Option 1</div>
        <div className={`option ${option === '2'? 'selected' : ''}`} onClick={(e) => setOption('2')}>Option 2</div>
      </div>
      <div className="content-wrap">
        {option === '1' && <div>Option 1 content</div>}
        {option === '2' && <div>Option 2 content</div>}
      </div>
    </div>
  );
}

简单的CSS


.option-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-wrap .option {
  background: white;
  padding: 8px 12px;
  margin: 10px 12px 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
}

.option-wrap .option.selected {
  background: red;
  color: white;
}

It must be very simple and you can get it by a state variable that will control your buttons.

const [option, setOption] = useState('1');

This state variable option will hold 1 or 2 and if 1 is selected then it will show the first content part, otherwise 2nd content part will be shown.

And onClick on these options will change the state variable.

onClick={(e) => setOption('1')}

Here is a code. Code on sandbox

import React, {useState} from 'react';

import "./styles.css";

export default function App() {
  const [option, setOption] = useState('1');
  return (
    <div className="App">
      <div className="option-wrap">
        <div className={`option ${option === '1'? 'selected' : ''}`} onClick={(e) => setOption('1')}>Option 1</div>
        <div className={`option ${option === '2'? 'selected' : ''}`} onClick={(e) => setOption('2')}>Option 2</div>
      </div>
      <div className="content-wrap">
        {option === '1' && <div>Option 1 content</div>}
        {option === '2' && <div>Option 2 content</div>}
      </div>
    </div>
  );
}

Simple CSS


.option-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-wrap .option {
  background: white;
  padding: 8px 12px;
  margin: 10px 12px 20px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
}

.option-wrap .option.selected {
  background: red;
  color: white;
}

回复收藏 0 原文

~没有更多了~