將圖像從列表（無狀態）組件傳遞到顯示（有狀態）組件--react

Question

 //ImagePlayer component class ImagePlayer extends Component { constructor(props) { super(props) this.state = { image: [], selectedImage: '', } this.handleImageSelection = this.handleImageSelection.bind(this); } handleImageSelection(source){ this.setState({ImageList: source}) } render() { return ( <Grid container spacing={3}> <Grid item xs={8}> <Paper> {/* this is the larger div where I want to render the image clicked on the list */} <ImageList handleImageSelection={this.handleImageSelection}/> </Paper> </Grid> <Grid item xs={4}> <Paper> <ImageList /> </Paper> </Grid> </Grid> ); } } //ImageList component onst ImageList = (handleImageSelection) =>{ handleImageSelection=(image)=>{ console.log(image); } return( images.map((image, id) => <List> <ListItem key={id} > <div> <ListItemAvatar> {<img src= {require(`../assets/${image.name}.jpeg`)} alt="thumbnail" onClick={()=>handleImageSelection(require(`../assets/${image.name}.jpeg`))}/>} </ListItemAvatar> </div> <div >)

如何在 React 中將圖像從 List 組件渲染到 Class 組件？ 我的列表組件是圖像列表，當我單擊列表上的任何圖像時，它應該在 class 組件中放大。

我首先定義了 state: this.state ={ imageSelected: ''}然后setState相同。 還在列表組件handleImageSelection作為 function 傳遞，但它說

'handleImageSelection' 不是 function

onClick={()=> props.handleImageSelection()} //errr: 不是 function

Answer 1

如果您的列表和顯示組件都被公共父級包裹，您可以按如下方式解除必要的 state （例如選擇的圖像id ）：

 const { Component } = React, { render } = ReactDOM, rootNode = document.getElementById('root') const imageList = [ {id:0, name: 'circle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI1MCIvPjwvc3ZnPg==`}, {id:1, name: 'triangle', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTAsMCBMMTAwLDEwMCBMMCwxMDAgeiIvPjwvc3ZnPg==`}, {id:2, name: 'square', imgSrc: `data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCwwIGgxMDAgdjEwMCBoLTEwMCB6Ii8+PC9zdmc+`}, ] const List = ({images, onSelect}) => ( <ul> { images.map(({imgSrc, name, id}) => ( <li key={id} onClick={() => onSelect(id)}> <img className="thumbnail" src={imgSrc} alt={name}/> </li> )) } </ul> ) class Display extends Component { render (){ const {imgSrc,name} = this.props.image return ( <img className="fullsize" src={imgSrc} alt={name} /> ) } } class App extends Component { state = { chosenImg: null } images = imageList onSelect = _id => this.setState({ chosenImg: this.images.find(({id}) => id == _id) }) render(){ return ( <div> <List images={this.images} onSelect={this.onSelect} /> { this.state.chosenImg && <Display image={this.state.chosenImg} />} </div> ) } } render ( <App />, rootNode )

 .thumbnail { max-width: 50px; cursor: pointer; }.fullsize { width: 200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>