时间戳

首页 > 解决方案 > 如何将函数传递给 React.js 中的变量组件？

reactjs - 如何将函数传递给 React.js 中的变量组件？

问题描述

我知道如何在 React 中将函数从父组件传递给子组件。例如，在将子组件分配给变量后，我想将函数传递给子组件。

我有Parent组件和Child组件，我将Child组件分配给c变量。之后，我想将 parentFunction 传递给变量c？

function Parent() {

  const parentFunction =(test)=>{
    alert(test);
  }

  const c = <Chiled></Chiled>

  return (
    <div>
      {c} // How can to pass parentFunction to vaiable c

      {/* <Chiled parentFunction={parentFunction}></Chiled> */}

    </div>
  );
}

const Chiled=(props)=>{
  return (
    <div onClick={()=>{props.parentFunction("Hi")}}>google</div>
  )
}

标签： reactjs

解决方案

如果我理解正确，您可以在分配给 时设置道具c，然后使用c.

编辑： OP希望能够从组件中创建一个变量，然后为其分配道具-我已经更新了我的答案以反映这一点。

CodePen 镜子

function Parent(props) {
  const handleChildClick = event => {
    alert(event.target.innerHTML);
  };

  let c = <Child />;
  c.props.onChildClick = e => handleChildClick(e)

  return (
    <div style={{ border: "1px solid blue" }}>
      <p>PARENT</p>
      {c}
    </div>
  );
}

function Child(props) {
  const handleClick = event => {
    props.onChildClick(event);
  };

  return (
    <div style={{ border: "1px solid red", margin: "5px" }}>
      <p onClick={handleClick}>CHILD - CLICK ME</p>
    </div>
  );
}

ReactDOM.render(<Parent />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

推荐阅读