javascript - Antipattern React - 从其他组件获取值(value)

Question

我是 react 新手，我只是想知道从另一个组件内创建的组件接收值(value)的最佳解决方案是什么，这将是反模式。我有这两个组件 - mainComponent 有带有图像链接的变量，我刚刚创建了图像并保存了图片表中的索引值。在 Canvas 中我正在渲染这个图像。我只想保存单击图像的索引，创建从 img 对象返回值的函数将是一个很好的解决方案吗？或者它是反模式，我应该尝试另一种方法来实现这个？

 class MainComponent extends React.Component {
  
  constructor(){
    super();
    this.imageCol = ['link','link']
    this.state={
        indexOfImage : 0,
    };
  } 
  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            return <Image value ={index} source={this.imageCol[index]} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }
}

class Image extends React.Component {
  
  constructor(props){
    super(props);
  }

  render() {
    return (
      <img value ={this.props.value} onClick={ ()=>{console.log('click'+this.props.value)} } className={this.props.style} src={this.props.source}/>
    );
  }
}

export default Image;

Answer 1

您只需将一个函数传递给 Image 组件的 onclick 即可。那不会是反模式。事实上，应该这样做。

constructor(){
    ...
  } 
  clickHandler(index){
     console.log("index of the clicked image = "+index)
  }
  render() {

    return (
      <div>
        <div>
          {this.imageCol.map((e,index) => {
            // pass a function as a prop like this
            return <Image onClick={this.clickHandler.bind(this,index)} value ={index} source={this.imageCol[index]} key={index} style={this._returnState(index)} />
          })}
        </div>
        <div>
          <ReactCanvas image={this.imageCol[this.state.indexOfImage]}/>
        </div>
      </div>
    );
  }

然后在图像组件中只需调用作为 prop 传递给此组件的 onclick 函数

render() {
    return (
      <img value ={this.props.value} onClick={this.props.onClick} className={this.props.style} src={this.props.source}/>
    );
  }