React.js - 如何使用来自孩子的参数在父级中执行函数

Question

The question is probably rather unclear, but i did not how to formulate it, maybe that was the reason why i was not able to find solution to this puzzle i have. anyway, here is an example of what i want to accomplish:

<Calendar
      tileContent={({ activeStartDate, date, view }) =>
        this.renderGames(date, view)
      }
    />

This is an example from npm package react-calendar, but i am sure you know what i mean. The param tileContent gets passed function that already has destructured object, and then i run my own function with data i get from that function.

I was thinking that this was done by executing function in child where i would pass an object (or single param, i just use object as an example).

Answer 1

It sounds like you want to execute a function that's in the parent component, from a child component with arguments passed from the child.

Here is an example:

    const ParentComponent = () => {

      const handleClick = (args) => {
         console.log(args)
      }


      return (
         <div>
            <ChildComponent onClick={handleClick} />
         </div>

      )

}

const ChildComponent = ({onClick}) => {
   const val = 5;


   return (
      <div>
         <button onClick={() => handleClick(val)} name="Click">Click Me</button>
      </div>
   )
}

This hsould render the child component which is just a button, with an event handler that is sent from the parent. When you click the button, you should get a console log of 5, which is coming from the parent. This is how you would propgate values from the child, up to the parent.

Answer 2

I think what you're looking for are Render Props , not just executing function in parent with args (even though render props do this as well). It would appear your example is using Render Props specifically.

There are some good examples online of using render props in React, also referred to as "Wrapper Components", etc..

An example could be something like:

 const { render } = ReactDOM; class CounterWrapper extends React.Component { state = { count: 0 }; increment = () => { const { count } = this.state; return this.setState({ count: count + 1 }); }; decrement = () => { const { count } = this.state; return this.setState({ count: count - 1 }); }; render() { const { count } = this.state; return ( <React.Fragment> {this.props.wrapperContent({ increment: this.increment, decrement: this.decrement, count })} </React.Fragment> ); } } class App extends React.Component { renderApp = (cnt, inc, dec) => { return ( <div> <h1>Render Props Counter Example</h1> <div> <p>{cnt}</p> <button type="button" onClick={() => inc()}> Increment </button> <button type="button" onClick={() => dec()}> Decrement </button> </div> </div> ) }; render() { return ( <CounterWrapper wrapperContent={({ count, increment, decrement }) => this.renderApp(count, increment, decrement) } /> ); } } render(<App />, 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>