Reactjs 按钮单击以渲染Div_Reactjs

Reactjs 按钮单击以渲染Div

reactjs

Reactjs 按钮单击以渲染Div,reactjs,Reactjs,我想单击按钮并渲染其相应的div。我是否应该将要渲染的div信息添加到状态？我相信有几种不同的方法可以解决这个问题，但我想用React方法来解决，也许是作为一个功能组件更新 export default function About(props) ( const [isHidden, setIsHidden] = useState(true); const handleClick = () => { setIsHidden

我想单击按钮并渲染其相应的div。我是否应该将要渲染的div信息添加到状态？我相信有几种不同的方法可以解决这个问题，但我想用React方法来解决，也许是作为一个功能组件

更新

       export default function About(props) (
        const [isHidden, setIsHidden] = useState(true);

        const handleClick = () => {
        setIsHidden(!isHidden);
        };
         return (

       <div className="row justify-content-md-center">
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Website Develpment</CustomButton>
        </div>
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Wordpress Develpment</CustomButton>
        </div>
        <div className="col-auto">
          <CustomButton onClick={handleClick}>Ecommerce Development</CustomButton>
        </div>
      </div>

      <div className="row">
        <div className="col-md-4">column 1</div>
        <div className="col-md-4">column 2</div>
        <div className="col-md-4">column 3</div>
      </div>
     );
    )

导出默认函数关于（道具）(
const[ishiden，setishiden]=useState（true）；
常量handleClick=（）=>{
setisheden（！ishiden）；
};
返回(
网站开发
Wordpress开发
电子商务发展
第1栏
第2栏
第3栏
);
)

您可以将ID存储为字符串状态变量，并在按下按钮时设置该变量

然后使用仅显示具有匹配ID的div

const{useState}=React；
关于（道具）的功能{
const[visibleItem，setVisibleItem]=useState（“”）；
返回(
setVisibleItem（“网站”）}>
展示网站发展
setVisibleItem（“wordpress”）}>
显示Wordpress开发
setVisibleItem（“电子商务”）}>
展示电子商务发展
{visibleItem===“网站”&&
Wordpress开发
关于Wordpress的信息以及我能用它做的所有事情
}     
{visibleItem===“wordpress”&&
电子商务发展
我也能做一些事情
}      
{visibleItem===“电子商务”&&
网站开发
关于Webdev的信息
}
);
}
ReactDOM.render(
,
document.getElementById（“react”）
);
您可以创建两种状态，一种是保存按钮信息数组以最小化代码重复，另一种是跟踪单击的列
 import React, { useState } from "react";
    
    export default function About(props) {
      const [colNum, setColNum] = useState('');
      const [btnNames] = useState([
        {
          colId: 1,
          name: "Website Develpment"
        },
        {
          colId: 2,
          name: "Wordpress Develpment"
        },
        {
          colId: 3,
          name: "Ecommerce Develpment"
        }
      ]);
    
      const handleClick = (id) => {
        setColNum(id);
      };
    
      return (
        <>
          <div className="row justify-content-md-center">
            {btnNames.map(element => (
              <div className="col-auto" key={element.colId}>
                <CustomButton onClick={()=> handleClick(element.colId)}>{element.name}</CustomButton>
              </div>
            ))}
          </div>
    
          {colNum !== '' ? (<div className="row">
            <div className="col-md-4">column {colNum}</div>
            </div>) : null }
          
        </>
      );
    }

import React，{useState}来自“React”；
导出默认函数关于（道具）{
const[colNum，setColNum]=useState（“”）；
常量[btnNames]=useState([
{
科里德：1，
名称：“网站开发”
},
{
科里德：2，
名称：“Wordpress开发”
},
{
科里德：3，
名称：“电子商务发展”
}
]);
常量handleClick=（id）=>{
setColNum（id）；
};
返回(
{btnNames.map（元素=>(
handleClick（element.colId）}>{element.name}
))}
{colNum！=''(
列{colNum}
)：null}
);
}
因此，您可以为状态中的每个部分定义显示值，其首字母应为false
。然后，我们可以通过一个可以使用内置JS工具的函数来处理这种状态（Object.entries
、Object.fromEntries
和map
）。将显示元素，其值将为true
，其余元素将自动变为false
。更多详细信息可在此处找到：
import React，{useState}来自“React”；
导入“/styles.css”；
从“/TestStyles.module.css”导入样式；
从“/CustomButton”导入CustomButton；
导出默认函数App（）{
const[showDiv，setShowDiv]=useState({
网站：错，
错，
电子商务：错误
});
常量showDivHandler=（val）=>{
const newState=Object.fromEntries(
Object.entries（showDiv）.map（（[key，value]）=>[key，（value=false）]）
);
setShowDiv({
…新闻状态，
[val]：！showDiv[val]
});
};
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
showDivHandler（“web”）}>
网站开发
showDivHandler（“wordpress”）}>
Wordpress开发
showDivHandler（“电子商务”）}>
电子商务发展
{showDiv.web&&column 1}
{showDiv.wordpress&&column 2}
{showDiv.ecommerce&&column 3}
);
}

自定义按钮可以如下所示：
import React from "react";

const button = (props) => (
  <button
    onClick={props.clicked}
    //some other props if need it(e.g. styles)
  >
    {props.children}
  </button>
);

export default button;

从“React”导入React；
常量按钮=（道具）=>(
{props.children}
);
导出默认按钮；
我就是这样解决的。谢谢你的帮助
export default function About() {
  const [visibleItem, setVisibleItem] = useState(1);

  const [priceItems] = useState([
    {
      id: 1,
      name: "website",
    },
    {
      id: 2,
      name: "wordpress",
    },
    {
      id: 3,
      name: "ecommerce",
    },
  ]);

  const handleClick = (id) => {
    setVisibleItem(id);
  };
  return (
    <div className="container-fluid pricing-wrapper">
      <div className="row">
        <div className="col">
          <h1>Pricing</h1>
        </div>
      </div>

      <div className="row">
        <div className="col">
          <p>Innovation that empowers your team while also reducing risk!</p>
          <div className="seperator"></div>
        </div>
      </div>

      <div className="row justify-content-md-center">
        <div className="row justify-content-md-center">
         {priceItems.map((item) => (
           <div className="col-auto">
              <CustomButton onClick={() => setVisibleItem(item.id)}>
               {item.name}
              </CustomButton>
          </div>
         ))}
          </div>
      </div>

      {priceItems
        .filter((item) => item.id === visibleItem)
        .map((item) => (
          <PriceItem item={item} />
        ))}
    </div>
  );
}

导出默认函数About（）{
const[visibleItem，setVisibleItem]=useState（1）；
常量[priceItems]=useState([
{
id:1，
名称：“网站”，
},
{
id:2，
名称：“wordpress”，
},
{
id:3，
名称：“电子商务”，
},
]);
常量handleClick=（id）=>{
setVisibleItem（id）；
};
返回(
定价
创新，增强团队能力，同时降低风险
{priceItems.map（（项目）=>(
setVisibleItem（item.id）}>
{item.name}
))}
{价格项目
.filter（（项）=>item.id==visibleItem）
.map（（项目）=>(
))}
);
}
当您单击一个按钮，并呈现一个div，然后单击另一个按钮时，您希望它也显示出来，还是应该替换原始div？它应该替换原始div。为什么需要在此处显示函数？const handleClick=（项）=>（）=>setVisibleItem（项）；抱歉，当我将功能移动到按钮时，忘记删除
export default function About() {
  const [visibleItem, setVisibleItem] = useState(1);

  const [priceItems] = useState([
    {
      id: 1,
      name: "website",
    },
    {
      id: 2,
      name: "wordpress",
    },
    {
      id: 3,
      name: "ecommerce",
    },
  ]);

  const handleClick = (id) => {
    setVisibleItem(id);
  };
  return (
    <div className="container-fluid pricing-wrapper">
      <div className="row">
        <div className="col">
          <h1>Pricing</h1>
        </div>
      </div>

      <div className="row">
        <div className="col">
          <p>Innovation that empowers your team while also reducing risk!</p>
          <div className="seperator"></div>
        </div>
      </div>

      <div className="row justify-content-md-center">
        <div className="row justify-content-md-center">
         {priceItems.map((item) => (
           <div className="col-auto">
              <CustomButton onClick={() => setVisibleItem(item.id)}>
               {item.name}
              </CustomButton>
          </div>
         ))}
          </div>
      </div>

      {priceItems
        .filter((item) => item.id === visibleItem)
        .map((item) => (
          <PriceItem item={item} />
        ))}
    </div>
  );
}