React 使用功能组件更改父组件的内部功能

Question

I have two components: one parent and one in child component as shown below:

import React, { Component, useState, useEffect } from 'react';

const useDocumentTitle = (title) => {
  useEffect(() => {
    document.title = title;
  }, [title])
}

function App(){
  const [count,setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);
  const newDivElem = () => { return ( <>Hello World </>)}
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <>
     Count of this value {count}
      <br />
      <button onClick={incrementCount}>+</button>&nbsp;
      <button onClick={decrementCount}>-</button>
      {newDivElem()}
    </>
  );
}

export default App; 

function InternalApp(){
     return(
        <App />
    );
}
export default InternalApp; 

How can I overwrite the App component inner function newDivElem() inside the InternalApp component?

Please suggest some idea.

Answer 1

You can extract the function to a prop, and set the original function as the default value:

const newDivElem = () => { return ( <>Hello World </>)}

function App({ newDivElem = newDivElem }){
  const [count,setCount] = useState(0);
  const incrementCount = () => setCount(count + 1);
  const decrementCount = () => setCount(count - 1);
  useDocumentTitle(`You clicked ${count} times`);

  return (
    <>
     Count of this value {count}
      <br />
      <button onClick={incrementCount}>+</button>&nbsp;
      <button onClick={decrementCount}>-</button>
      {newDivElem()}
    </>
  );
}

If you want to override it, pass another function as the prop:

function InternalApp(){
   return(
      <App newDivElem={() => <div>Something Else</div>} />
  );
}