Как передать функцию в качестве опоры в компонентах реагировать?

Question

Мне нужно определить функцию в одном компоненте и вызвать ее в другом компоненте, оба в одном и том же файле.

Я не могу определить обе функции в одном компоненте. Это предварительное условие включает в себя другие сложности кода.

const SchematicEditor = () => {
    return(
        <div>
        <Component />
        <ReactCursorPosition className="editor"
        activationInteractionMouse={INTERACTIONS.CLICK}> 
        <PositionLabel />
        </ReactCursorPosition>
        </div>
    )
}
const PositionLabel = (props) => {
  function createSVG()
  {
    alert(width);
  }
  const {
      elementDimensions: {
        width = 0,
        height = 0
      } = {},
      isActive = false,
      isPositionOutside = false,
      position: {
        x = 0,
        y = 0
      } = {}
    } = props;
    return (
      <div className="window" id = "canvas">
        {x: ${x}}<br />
        {y: ${y}}<br />
        {width:: ${width}}<br />
        {height: ${height}}<br />
        {isActive: ${isActive}}<br />
        {isPositionOutside: ${isPositionOutside ? 'true' : 'false'}}<br />
      </div>
    );
  };

const Component = (props) => {
  return(
  <div className='component'>
      <div className="icons">
          <button onClick={() => props.createSVG()}><a href = "" id = "vsource" className="btn-floating btn-large waves-effect waves-light white"><i className="material-icons"><img src={vsource} alt={'v source'}/></i></a></button>
      </div>
  </div>
  )
}

export default SchematicEditor;

Я получаю ошибку Function not defined.

Answer 1

const PositionLabel = (props) => {     function createSVG()   {
 alert('yo');   
   }
   return(
   <Component createSVG ={()=>createSVG})
       )
     } 
 const Component = (props) => {       return(   <div
   className='component'>
  <div className="icons">
      <button onClick={()=>props.createSVG}></button>
  </div>   
  </div>) }

вам нужно передать функцию в качестве реквизита вашему компоненту!

Answer 2

Вы передали функцию как реквизит, но без названия, чтобы вы могли ссылаться на нее внутри компонента. (props) => {createSVG: (args) => {func}}