調用JavaScript方法從反應

我想調用JavaScript函數從先前使用jQuery調用JavaScript方法從反應

下面

寫了一些老功能適應了「響應」基於「菜單」的方法進行反應，是我的菜單代碼

class Menus extends React.Component{ 
     constructor(props) { 
     super(props); 
     this.state = { 
     visible: false, 
     data: [] 
    }; 
    } 

    componentDidMount(){ 
    var _this = this; 
    this.setState({data: this.props.data}); 
    } 

    handleClick() { 
    var active = !this.state.visible; 
    this.setState({ visible: active }); 
    console.log(this.props.data.MenuText); 
    } 

    menuTrigger(params){ 
    var func="testalert";//this.props.data.onclick; 
    var fnparams = JSON.parse(this.props.data.Parameter); 
    // find object 
    var fn = eval(func); 

    // is object a function? 
    console.log('typeof fn === "function":',typeof fn === "function" , typeof fn,fnparams); 

      fn.apply(null,fnparams); 
    console.log('Executing:',this.props.data.onclick); 
    } 
    render(){ 
    var childNodes; 
    var classObj; 
    var url; 
    childNodes = null; 

    if (this.props.data.Children.length) { 
     childNodes = this.props.data.Children.map(function(node, index) { 
     return <Menus data={node} /> 
     }); 
     classObj = { 
     togglable: true, 
     "togglable-down": this.state.visible, 
     "togglable-up": !this.state.visible 
     }; 
    } 

    var style; 
    if (!this.state.visible) { 
     style = {display: "none"}; 
    } 
    if (childNodes != null){ 
     return (
     <li> 
      <a href="#" onClick={this.handleClick.bind(this)} className="menu {classNames(classObj)}"> 
      <i className="fa fa-road"></i> 
      {this.props.data.MenuText} 
      </a> 
      <ul style={style} className="treeview-menu">{childNodes}</ul> 
     </li> 
    ); 
    }else{ 
     return (
      <li> 
      <a href="#" className="menu" onClick={() => this.menuTrigger(this.props.data.Parameter)}> 
       <i className="fa fa-files-o"></i> 
       {this.props.data.MenuText} 
      </a> 
      </li> 
     ); 
    } 
    } 
}

javascript函數名稱存儲在字符串格式在JSON對象

var example={ 
"MenuText": "example", 
"Parameter": "{'name':'joe'}", 
"onclick": "sayhello" 
};

前面的代碼被實現爲這樣

function sayhello(parameter){ 
    alert('hi '+parameter.name); 
}

我一直在試圖執行這個，但得到一個「參數」未定義。

我很懷疑這裏的一些問題。

爲什麼params空？該字符串接受它爲「功能」

fn.apply（null，fnparams）;
這是一個正確的方式來使用反應嗎？

來源

2017-01-03 SiGaban

在開始你應該嘗試的調試（或學習如何調試） – degr

添加到您的構造這樣的：'this.menuTrigger = this.menuTrigger.bind（這個）;' –

爲什麼不使用：

var func="testalert";//this.props.data.onclick; 
    var fnparams = JSON.parse(this.props.data.Parameter); 
    // find object 
    eval(func+'('+fnparams+')');

來源

2017-01-03 12:53:47 Kinnza

它不是正確的方式來使用它的反應。我不知道你爲什麼將字符串傳遞給函數。如果你可以傳遞它作爲自己（函數對象），那麼你可以簡單地調用它的參數（不需要申請或任何東西） – Kinnza

謝謝。要執行的函數存儲在數據庫中，我不明白你的意思是函數對象。我正在學習，並熱衷於做到這一點，向我展示一個例子嗎？ – SiGaban

如果函數的名稱存儲在數據庫中，那麼我想這是唯一的方法。但如果它不是，通過函數對象我的意思是實際的函數參考。假設你在代碼中有某處 - var x = function（）{...}，那麼你可以使用變量x調用它，如下所示：x（fnparams） – Kinnza

調用JavaScript方法從反應

回答

相關問題