在子组件中调用父函数

Question

I'm trying to wrap one component in another and call a function from that "one" component.

<Parent>
    <Child1>
    <button
        onClick={
        //toggleSomething
        console.log("Run function `toggleSomething` from parent")
        }
    >
        Change state 1
    </button>
    </Child1>

    <Child2>
    <button
        onClick={
        //toggleSomething
        console.log("Run function `toggleSomething` from parent")
        }
    >
        Change state 2
    </button>
    </Child2>
</Parent>

and in Parent component I have:

class Parent extends React.Component {
  state = {
    something: false
  };

  toggleSomething = () => {
    this.setState({
      something: true
    });
  };

  render() {
    return <div className="parentClasses">{this.props.children}</div>;
  }
}

Here is playground: https://codesandbox.io/s/1ykllwnyq3

There is a solution for that?

Answer 1

Assuming these responsibilities for these components:

• Parent : Take care of the state.
• Child1 and Child2 : Generic UI container.
• App : Takes care of how the state of Parent is rendered.

This can be done using the render props technique.

In the example below, instead of passing an element as a children to <Parent> , a function is passed in instead .

 class App extends React.Component { render() { return ( <div> <Parent> {toggle => ( <React.Fragment> <Child1> <button onClick={toggle}>Change state 1</button> </Child1> <Child2> <button onClick={toggle}>Change state 2</button> </Child2> </React.Fragment> )} </Parent> </div> ); } } class Parent extends React.Component { state = { something: false }; toggleSomething = () => { this.setState({ something: true }); }; render() { return ( <div className="parentClasses"> {this.state.something.toString()} {this.props.children(this.toggleSomething)} </div> ); } } const Child1 = props => { return <div class="someClasses">{props.children}</div>; }; const Child2 = props => { return <div class="someOtherClasses">{props.children}</div>; }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root"></div> 

Answer 2

 class App extends React.Component { render() { return ( <div> <Parent> <Child1 /> <Child2 /> </Parent> </div> ); } } class Parent extends React.Component { state = { something: false }; toggleSomething = () => { console.log("now toggling !!"); this.setState({ something: true }); }; render() { const reactChildren = React.Children.toArray(this.props.children); const childrenWithProps = reactChildren.map(element => React.cloneElement(element, { toggleSomething: this.toggleSomething }) ); return <div className="parentClasses">{childrenWithProps}</div>; } } const Child1 = props => { return ( <div class="someClasses"> <button onClick={ //toggleSomething () => { props.toggleSomething(); console.log("Run function `toggleSomething` from parent"); } } > Change state 1 </button> </div> ); }; const Child2 = props => { return ( <div class="someOtherClasses"> <button onClick={() => { debugger; props.toggleSomething(); console.log("Run function `toggleSomething` from button 2"); }} > Change state 2 </button> </div> ); }; const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>. 

Now the content of Child 2 and Child1 can be rendered according to props let say tomorrow, you want something else for Child 2 view. you can change your child Component like this.

const Child2 = props => {
      const { RenderView, toggleSomething } = props
      //renderView is your view Component(stateless/statefull)
      return (
      <div class="someOtherClasses">
        {<RenderView toggleSomething={toggleSomething} />}
      </div>
      );
    };

How about this approach ?.

Answer 3

You need to pass the function, and access it from props. Clone Element lets you add the prop to all children.

import React from "react";
import ReactDOM from "react-dom";

const Child1 = props => {
  return <button onClick={props.handler}>test</button>;
};

class Parent extends React.Component {
  state = {
    something: "nope"
  };

  toggleSomething = () => {
    this.setState({
      something: "yes"
    });
  };

  render() {


    const childrenWithProps = React.Children.map(
      this.props.children, child =>
          React.cloneElement(
          child, { handler: this.toggleSomething }
            )
      );

    return <div className="parentClasses">
    {this.state.something}
      {childrenWithProps}   
    </div>;
  }
}

const App = () => 
    <Parent>
        <Child1/> 
    </Parent>

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);