如何将参数传递给同一组件中的函数？答案

【问题标题】：How to pass parameters to function in the same component?如何将参数传递给同一组件中的函数？
【发布时间】：2019-12-21 07:00:08
【问题描述】：

我正在尝试动态创建具有不同名称的节点。我试图通过将值传递给同一组件中的函数来实现。但是，在控制台上，传递的参数仍然显示为未定义。

  const ElmArchitecture = ({name}) => {
    console.log(name);
  var engine = new DiagramEngine();
  engine.installDefaultFactories();

  var model = new DiagramModel();
  var node1 = new DefaultNodeModel(name, "rgb(0,192,255)");
  let port1 = node1.addOutPort(" ");
  node1.setPosition(100, 100);

  var node2 = new DefaultNodeModel("view", "rgb(192,255,0)");
  let port2 = node2.addInPort("Model");
  node2.setPosition(400, 100);

  let link1 = port1.link(port2);
  link1.addLabel("Label1");

  var node3 = new DefaultNodeModel("Child", "rgb(0,192,255)");
  let port3 = node3.addOutPort(" ");
  node3.setPosition(50, 50);

  var node4 = new DefaultNodeModel("Parent", "rgb(192,255,0)");
  let port4 = node4.addInPort("Child");
  node4.setPosition(150, 10);

  let link2 = port3.link(port4);
  link2.addLabel("Label2");

  model.addAll(node1, node2, link1, node3, node4, link2);

  engine.setDiagramModel(model);

  return <DiagramWidget className="srd-demo-canvas" diagramEngine={engine} />;
};

class SecondPage extends Component {
  render() 
  { 
    return (
      <div>
        <div id="secondPage_second_div">
          <ElmArchitecture>Model</ElmArchitecture>
        </div>
      </div>
    )
  }
}

export default SecondPage;

【问题讨论】：

标签： javascript html reactjs function parameter-passing

【解决方案1】：

你似乎没有向你的组件传递任何东西

试试这个

<ElmArchitecture name={"Name"}>Model</ElmArchitecture>

这将使名称在您的子组件ElmArchitecture 中可用，就像这样

props.name
// > Name

您可以像以前一样（通过解构）在您的子组件ElmArchitecture 中获取它

const ElmArchitecture = ({name}) => {...

【讨论】：

【解决方案2】：

您没有将 name 参数传递给 ElmArchitecture 组件。

class SecondPage extends Component {
  render() 
  { 
    return (
      <div>
        <div id="secondPage_second_div">
          <ElmArchitecture name={"Model"}></ElmArchitecture>
        </div>
      </div>
    )
  }
}

【讨论】：