Question

我正在尝试传递一个函数名，该函数名将由对象中的另一个组件使用，将其传递给prop，但是在传递给它的组件中存在函数我不能通过我传递的名称来调用它。

app.js

//  conversion factor to map 15.0 to 0xF0
float m = (float) (0xF0 / 15.0);

for (float x = 0.0f; x <= 15.0f; x += 0.25f) {
    //  obtain byte corresponding to float
    byte b = (byte) (m * x);
    //  recover float from byte to check conversion
    //  mask off sign bit to convert signed to unsigned byte
    float r = (b & 0x0FF) / m;
    //  what is the difference between original float and 
    //  recovered float?
    float error = Math.abs(x - r);
    //  show all values for testing
    String s = " b=0x" + Integer.toHexString(b & 0x0FF) + 
               " r=" + Float.toString(r) + 
               " err=" + Float.toString(error);
    System.out.println(s);
}

task.js

<div className="ui container five column grid taskList">
  {tasks.map(function(entry,idx) {
    return(
      <Task key={idx} 
        message={entry} 
        deleteTask={this.handleDelete} 
        renameTask={this.handleRename} 
        saveTask={this.handleSave} 
        openTask={this.handleOpen} 
        entryNum={idx} 
        iconSetup={{
          icon1:{ inClass:'expand', clickFun:this.openCurrentTask },
          icon2:{ inClass:["save","saveTask"], clickFun:this.saveCurrentTask },
          icon3:{ inClass:["trash","outline"], clickFun:this.removeCurrentTask }
        }}
      />
    )
  },this)}
</div>

classNames按原样传递，但onClick = undefined

我尝试添加.bind（this）,. bind（null，this），但是没有一个工作，而是一旦安装了组件，它们就会崩溃整个应用程序。

Answer 1

这是一种方法。我不认为这是实现这一目标的最佳方式，但我会尽力坚持你的结构。您可能想要了解有关React composition

的更多信息

<div className="ui container five column grid taskList">
  {tasks.map(function (entry,idx) {
    return(
      <Task key={idx} 
        message={entry} 
        deleteTask={this.handleDelete} 
        renameTask={this.handleRename} 
        saveTask={this.handleSave} 
        openTask={this.handleOpen} 
        entryNum={idx} 
        iconSetup={{
          icon1:{ inClass: 'expand', clickFun: 'open' },
          icon2:{ inClass: ["save", "saveTask"], clickFun: 'save' },
          icon3:{ inClass: ["trash", "outline"], clickFun: 'remove' }
        }}
      />
    )
  },this)}
</div>

task.js

export class Task extends React.Component {
  constructor (props) {
    super(props);
    this.dataChanged = this.dataChanged.bind(this);
    this.removeCurrentTask = this.removeCurrentTask.bind(this);
    this.saveCurrentTask = this.saveCurrentTask.bind(this);
    this.openCurrentTask = this.openCurrentTask.bind(this);
    this.state = {
      message: this.props.message
    }
  }
  saveCurrentTask () {
    this.props.saveTask(this.props.entryNum);
  }
  customValidateText (text) {
    return (text.length > 0 && text.length < 31);
  }

  dataChanged(data) {
    console.log(data.message);
    this.props.renameTask(data.message,this.props.entryNum);
    this.setState({ message: data.message });
  }

  removeCurrentTask () {
    this.props.deleteTask(this.props.entryNum);
  }
  openCurrentTask () {
    this.props.openTask(this.props.entryNum);
  }
  render () {
    const centerRow = classNames('textCenter', 'row'),
          dictionary = {
               open: this.openCurrentTask ,
               save: this.saveCurrentTask ,
               remove: this.removeCurrentTask 
            },
          iconSetup = this.props.iconClasses,
          domIcons = [];
    for (let icon in iconSetup) {
      if (iconSetup.hasOwnProperty(icon)) {
        let element = iconSetup[icon];
        domIcons.push(<Icon className={classNames('large', element['inClass'])} onClick={dictionary[element.clickFun]}/>)
      }
    }
    return (
      <div className={centerRow}>
        {domIcons}
      </div>
    );
  }
}

ReactJS：如何通过对象中的prop将函数名传递给另一个组件

1 个答案: