Javascript 从另一个组件引用类

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)

我正在尝试将目标锁定在app.js组件中的侧栏:

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上面添加了更多代码!