如何访问不同组件的功能React

Question

以下是Panel的代码`

import React from "react";
// import {render} from "react-dom";
import AddInventory from "components/AddInventory";
class Panel extends React.Component{
constructor(props) {
super(props);
this.state = {
activeIndex: ''
}
}
componentDidMount() {
this.activePanel();
}
closePanel=()=>{
this.setState({
activeIndex : false
})
}

activePanel = ()=>{
this.setState({
activeIndex : true
})
}
render(){
return(
<div>
{/*<button className={"button is-primary add-btn"} onClick={this.activePanel}>add</button>*/}
<div className={this.state.activeIndex ? 'panel-wrapper active':'panel-wrapper'}>
<div className={"over-layer"}>
<div className={"panel"}>
<div className={"head"}>
<span onClick={this.closePanel} className={"close"}>x</span>
<AddInventory></AddInventory>
</div>
</div>
</div>
</div>
</div>
)
}

}
export default Panel;

Products:

import React from "react";
import ToolBox from "components/ToolBox";
import Product from "components/Product";
import axios from 'components/axios'
import {CSSTransition , TransitionGroup} from 'react-transition-group'
import Panel from "components/Panel";

class Products extends React.Component{
product =[];
source =[];
state ={
product : [{
id:'1',
name:'Air Jordan1',
tags:'45 colours',
image:'images/1.jpg',
price:'21000',
status:'available'
},
{
id:'2',
name:'Nike Pual George PG 3',
tags:'45 colours',
image:'images/2.jpg',
price:'11000',
status:'available'
},
{
id:'3',
name:'Jordan Why Not Zer0.2',
tags:'10 colours',
image:'images/3.jpg',
price:'15000',
status:'unavailable'
},
]
}
componentDidMount() {
// fetch('http://localhost:3003/products').then(response => response.json()).then( data=>{
//     console.log(data)
//     this.setState({
//         product : data
//     })
// })
axios.get('/products').then(response => {
this.setState( {
product : response.data,
source : response.data
})
})
}
search = text=>{
//1.get a new array from product
let _product = [...this.state.source]
//2.filter the array
let res = _product.filter((element)=>{
return element.name.toLowerCase().includes(text.toLowerCase())
})
//set state
this.setState({
product : res
})
}
add = ()=>{
let panel =  new Panel(this.props)
panel.activePanel()
}

// add =()=>{
//     panel.setState({
//         activeIndex : true
//     })
// }
render() {
return(
<div>
<ToolBox  search={this.search}/>
<div className={'products'}>
<div className="columns is-multiline is-desktop">
<TransitionGroup component={null}>
{
this.state.product.map(p=>{
return (
<CSSTransition
timeout={400}
classNames="product-fade"
key={p.id}
>
<div className="column is-3" key={p.id}>
<Product product={p}/>
</div>
</CSSTransition>
)
})
}</TransitionGroup>
{/*<div className="column is-3">*/}
{/*    <Product/>*/}
{/*</div>*/}
{/*<div className="column is-3">*/}
{/*    <Product/>*/}
{/*</div>*/}
</div>
<button className={"button is-primary add-btn"} onClick={this.add}></button>
</div>
</div>
)
}
}
export default Products;

我试着在Products中使用activePanel((，但它给了我：警告：不能在尚未安装的组件上调用setState。这是一个非操作，但它可能表明您的应用程序中存在错误。相反，直接将其赋值给.state或定义astate=｛｝；`类属性，该属性在Panel组件中具有所需状态。我尝试初始化一个新的面板((，但它仍然给我同样的错误。

Answer 1

欢迎。我认为这种方法不是最佳做法。通常，组件应该只更新自己的状态(请参阅此处(，并且通常您希望数据从父组件流到子组件(请参阅这里(。此外，你的设计具有欺骗性。当您呈现一个组件时，您可以在某个render(或return(语句中将其声明为JSX。但在这里，Panel从未在JSX中被正式实例化。

在Panel中，我建议通过shouldComponentUpdate观看像active这样的道具，并根据该道具的更改更新状态。然后在Products中，您可以在JSX中实例化Panel的实例，并动态设置该道具的值。