Javascript 从另一个组件引用类
我正在尝试将目标锁定在app.js组件中的侧栏:Javascript 从另一个组件引用类,javascript,class,reactjs,Javascript,Class,Reactjs,我正在尝试将目标锁定在app.js组件中的侧栏: class App extends React.Component { constructor() { super(); //initial state this.state = { plants: {}, order: {}, showSideBar: true, }; this.loadPlants = this.loadPlants.bind(this)
class App extends React.Component {
constructor() {
super();
//initial state
this.state = {
plants: {},
order: {},
showSideBar: true,
};
this.loadPlants = this.loadPlants.bind(this);
this.addToOrder = this.addToOrder.bind(this);
this.showSideBar = this.showSideBar.bind(this);
}
showSideBar(e) {
e.preventDefault();
this.sideBar.classList.toggle("show");
this.setState({
showSideBar: true,
})
}
它当前位于cart.js中,如下所示:
render() {
const orderIds = Object.keys(this.props.order);
const total = orderIds.reduce((prevTotal,key) => {
const plants = this.props.plants[key];
const count = this.props.order[key];
const isAvailable = true;
if(isAvailable) {
return prevTotal + (count * plant.price || 0);
}
}, []);
return(
<aside className="sideBar" ref={ref => this.sideBar = ref}>
<div className="order-wrap">
<h1>Your Cart</h1>
<ul className="order">
{orderIds.map(this.renderOrder)}
<li className="total">
<strong>Total:</strong>
{formatPrice(total)}
</li>
</ul>
<div className="close-btn" onClick={this.showSideBar}>
<i className="fa fa-times"></i>
</div>
<input type="submit" value="Place Order"/>
</div>
</aside>
render(){
const orderIds=Object.keys(this.props.order);
const total=orderIds.reduce((prevTotal,key)=>{
const plants=this.props.plants[key];
const count=this.props.order[key];
const isAvailable=true;
如果(可用){
返回prevTotal+(计数*工厂价格| | 0);
}
}, []);
返回(
this.sideBar=ref}>
你的车
{orderIds.map(this.renderroder)}
-
总计:
{价格(总计)}
关于如何在app.js中正确引用边栏类,有什么想法吗?“this.sideBar.classList.toggle(“show”)给我一个错误,说没有定义类列表。边栏是一个反应组件吗?@EJMason Nope,不是反应组件。它只是一个我们声明用来切换边栏/购物车的类。你能显示更多吗codes@JunbangHuang上面添加了更多代码!