Question

我知道如何在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>
  )
}

Answer 1

如果我正确理解了这一点，则可以在分配给c时设置道具，然后使用c。

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

>

CodePen Mirror

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>

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

1 个答案: