Question

我试图在调整＆＃34; React＆＃34;的过程中调用javascript函数。基于＆＃34;菜单＆＃34;在一些以前用jquery写的旧函数

下面是我的菜单代码

 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);
}

我一直试图执行此操作，但在＆＃34;参数＆＃34;上获得未定义。

我怀疑这里没什么问题。

为什么params是空的？字符串接受它作为＆＃34;功能＆＃34;

fn.apply（NULL，fnparams）;
这是一种正确的反应方式吗？

Answer 1

为什么不使用：

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

从反应中调用javascript方法

1 个答案: