Javascript 重新渲染组件
我正在开发一个react应用程序，当用户切换按钮时，价格将根据用户的偏好而改变 在父应用App.js中单击按钮后，我无法重新呈现状态 我的目标：当切换按钮更改时，使用更新的值重新渲染组件 App.jsJavascript 重新渲染组件,javascript,reactjs,render,Javascript,Reactjs,Render,我正在开发一个react应用程序，当用户切换按钮时，价格将根据用户的偏好而改变 在父应用App.js中单击按钮后，我无法重新呈现状态 我的目标：当切换按钮更改时，使用更新的值重新渲染组件 App.js import './App.css'; import "./components/Switch.css"; import Pricingbox from './Pricingbox'; import { useState } from "react"; f
import './App.css';
import "./components/Switch.css";
import Pricingbox from './Pricingbox';
import { useState } from "react";
function App() {
const [price, setPrice] = useState(1);
const [toggle, setToggle] = useState(false);
const toggler = () =>{
toggle ? setToggle(false): setToggle(true);
console.log(toggle);
toggle ? setPrice(0): setPrice(1);
}
return (
<main>
<header className="our-pricing">
<h1 className="h1">Our Pricing</h1>
<section className="annuall-monthly">
<div class="space-around">
<h3 className="h3">Annually</h3>
<label className="switch1">
<input type="checkbox" onClick={() => toggler()}/>
<span className="slider1"/>
</label>
<h3 className="h3">Monthly</h3>
</div>
</section>
<Pricingbox price={price}/>
</header>
</main>
);
}
export default App;
import'/App.css'；
导入“/components/Switch.css”；
从“/Pricingbox”导入Pricingbox；
从“react”导入{useState}；
函数App（）{
const[price，setPrice]=使用状态（1）；
const[toggle，setToggle]=useState（false）；
常数切换器=（）=>{
切换？设置切换（假）：设置切换（真）；
console.log（切换）；
切换？设置价格（0）：设置价格（1）；
}
返回(
我们的定价
每年
toggler（）}/>
月刊
);
}
导出默认应用程序；
import { useEffect, useState } from "react";
const Pricingbox = ({ price }) => {
console.log(price);
const pricingList = [
{
id: 1,
basic: "$19.99",
prof: "$24.99",
master: "$39.99"
},
{
id: 2,
basic: "$199.99",
prof: "$249.99",
master: "$399.99"
}
]
const x = pricingList[price];
console.log(x);
const y = x.basic;
const z = x.prof;
const w = x.master;
const [priceBasic, setPriceBasic] = useState(y);
const [priceProf, setPriceProf] = useState(z);
const [priceMaster, setPriceMaster] = useState(w);
return (
<main>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Basic</p>
<h2>{priceBasic}</h2>
<p className="bottom-p">
<hr></hr>
500 GB Storage
<hr></hr>
2 Users Alllowed
<hr></hr>
Send up tp 3GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
<div className="price-rectangle purplish-box">
<div className="pricing-text">
<p className="pricing-text-space">Professional</p>
<h2>{priceProf}</h2>
<p className="bottom-p">
<hr></hr>
1 GB Storage
<hr></hr>
5 Users Alllowed
<hr></hr>
Send up tp 10GB
<hr></hr>
</p>
<button className="btn white-box">Learn More</button>
</div>
</div>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Master</p>
<h2>{priceMaster}</h2>
<p className="bottom-p">
<hr></hr>
2 GB Storage
<hr></hr>
10 Users Alllowed
<hr></hr>
Send up tp 20GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
</main>
);
}
export default Pricingbox;
从“react”导入{useffect，useState}；
常量Pricingbox=（{price}）=>{
控制台日志（价格）；
常量pricingList=[
{
id:1，
基本：“$19.99”，
教授：“$24.99”，
船长：$39.99
},
{
id:2，
基本：“$199.99”，
教授：“$249.99”，
船长：$399.99
}
]
常数x=价格；
控制台日志（x）；
常数y=x.basic；
常数z=x.prof；
常数w=x.master；
const[priceBasic，setPriceBasic]=useState（y）；
const[priceProf，setPriceProf]=useState（z）；
const[priceMaster，setPriceMaster]=useState（w）；
报税表（
基本
{priceBasic}
500 GB存储
共有2名用户
发送tp 3GB
了解更多
专业版
{priceProf}
1 GB存储空间
共有5名用户
向上发送10GB
了解更多
Master
{priceMaster}
2 GB存储空间
共有10名用户
发送20GB的tp
了解更多
);
}
导出默认Pricingbox；
Pricingbox[price]useffectprice状态
import { useEffect, useState } from "react";
const Pricingbox = ({ price }) => {
const pricingList = [
{
id: 1,
basic: "$19.99",
prof: "$24.99",
master: "$39.99"
},
{
id: 2,
basic: "$199.99",
prof: "$249.99",
master: "$399.99"
}
];
const [priceBasic, setPriceBasic] = useState(0);
const [priceProf, setPriceProf] = useState(0);
const [priceMaster, setPriceMaster] = useState(0);
useEffect(() => {
const x = pricingList[price];
console.log(x);
const y = x.basic;
const z = x.prof;
const w = x.master;
setPriceBasic(y);
setPriceProf](z);
setPriceMaster](w);
}, [price]);
return (
<main>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Basic</p>
<h2>{priceBasic}</h2>
<p className="bottom-p">
<hr></hr>
500 GB Storage
<hr></hr>
2 Users Alllowed
<hr></hr>
Send up tp 3GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
<div className="price-rectangle purplish-box">
<div className="pricing-text">
<p className="pricing-text-space">Professional</p>
<h2>{priceProf}</h2>
<p className="bottom-p">
<hr></hr>
1 GB Storage
<hr></hr>
5 Users Alllowed
<hr></hr>
Send up tp 10GB
<hr></hr>
</p>
<button className="btn white-box">Learn More</button>
</div>
</div>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Master</p>
<h2>{priceMaster}</h2>
<p className="bottom-p">
<hr></hr>
2 GB Storage
<hr></hr>
10 Users Alllowed
<hr></hr>
Send up tp 20GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
</main>
);
}
export default Pricingbox;
从“react”导入{useffect，useState}；
常量Pricingbox=（{price}）=>{
常量pricingList=[
{
id:1，
基本：“$19.99”，
教授：“$24.99”，
船长：$39.99
},
{
id:2，
基本：“$199.99”，
教授：“$249.99”，
船长：$399.99
}
];
const[priceBasic，setPriceBasic]=useState（0）；
const[priceProf，setPriceProf]=useState（0）；
const[priceMaster，setPriceMaster]=useState（0）；
useffect（（）=>{
常数x=价格；
控制台日志（x）；
常数y=x.basic；
常数z=x.prof；
常数w=x.master；
setPriceBasic（y）；
setPriceProf]（z）；
setPriceMaster]（w）；
}，[价格]；
报税表（
基本
{priceBasic}
500 GB存储
共有2名用户
发送tp 3GB
了解更多
专业版
{priceProf}
1 GB存储空间
共有5名用户
向上发送10GB
了解更多
Master
import React from 'react';
import Pricingbox from './Pricingbox';
import { useState } from "react";
function App() {
const [toggle, setToggle] = React.useState(false);
const toggler = () => setToggle(!toggle);
return (
<main>
<header className="our-pricing">
<h1 className="h1">Our Pricing</h1>
<section className="annuall-monthly">
<div class="space-around">
<h3 className="h3">Annually</h3>
<label className="switch1">
<input type="checkbox" onClick={() => toggler()}/>
<span className="slider1"/>
</label>
<h3 className="h3">Monthly</h3>
</div>
</section>
<Pricingbox price={toggle?1:0}/>
</header>
</main>
);
}
export default App;
const [priceBasic, setPriceBasic] = useState(y);
import React from 'react';
import { useEffect, useState } from "react";
const Pricingbox = ({ price }) => {
const pricingList = [
{
id: 1,
basic: "$19.99",
prof: "$24.99",
master: "$39.99"
},
{
id: 2,
basic: "$199.99",
prof: "$249.99",
master: "$399.99"
}
]
const x = pricingList[price];
const priceBasic = x.basic;
const priceProf = x.prof;
const priceMaster = x.master;
return (
<main>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Basic</p>
<h2>{priceBasic}</h2>
<p className="bottom-p">
<hr></hr>
500 GB Storage
<hr></hr>
2 Users Alllowed
<hr></hr>
Send up tp 3GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
<div className="price-rectangle purplish-box">
<div className="pricing-text">
<p className="pricing-text-space">Professional</p>
<h2>{priceProf}</h2>
<p className="bottom-p">
<hr></hr>
1 GB Storage
<hr></hr>
5 Users Alllowed
<hr></hr>
Send up tp 10GB
<hr></hr>
</p>
<button className="btn white-box">Learn More</button>
</div>
</div>
<div className="price-rectangle white-box">
<div className="pricing-text">
<p className="pricing-text-space">Master</p>
<h2>{priceMaster}</h2>
<p className="bottom-p">
<hr></hr>
2 GB Storage
<hr></hr>
10 Users Alllowed
<hr></hr>
Send up tp 20GB
<hr></hr>
</p>
<button className="btn purplish-box">Learn More</button>
</div>
</div>
</main>
);
}
export default Pricingbox;