将字符串文字内的函数传递给其他组件

Question

I want to pass a function defined in my actions to an element.

Reducer

case 'UPDATE_HEADER':
    return Object.assign({}, state, {
        headerChildren: state.headerChildren.concat([action.child])
    });

Action.js

export const deleteHeader = () => {
    return {
        type: 'DELETE_HEADER',
    };
}

I am passing this action to my sidebar

onAddHeader () {
    this.props.addHeader();
    this.props.updateHeader(
        `<Header key='${this.props.childKey}' 
             deleteHeader='${this.props.deleteHeader}'/>`,
    );
}

The deleteHeader function is being passed to the Header component but the problem is that it is being passed as a string and not as a function.

I am rendering it as this

`{this.props.headerChildren.map((value, index) => (
    <JsxParser
        key={index}
        components={[Header]}
        jsx={value}
    />
))}`

Can someone please guide me through the solution. I have searched a lot and couldn't find a way to do it. If this is not the correct approach to do so, kindly let me know the proper way to do it. I am new to React + Redux so finding it a bit difficult.

Thanks in advance

Answer 1

I am going to take a stab at guessing what I think you want to achieve here - it is a bit unclear so if I am wrong please feel free to comment and I can try and fix.

You don't need to use a string template if you are not trying to pass a string. You can simply pass the component and props themselves. Something like this...

// I'm assuming you're doing something like this 
import Header from './wheverYourHeaderIs';

...

onAddHeader () {
    this.props.addHeader();
    this.props.updateHeader(Header, 
       { key: this.props.childKey, 
         deleteHeader: this.props.deleteHeader 
       }
    );
}

I turned your props into 1 keyed object so it is flexible to add more/less props without having to modify the number of arguments your updateHeader function has to take.

Then your updateHeader would do something like :

 function updateHeader(Component, props) {

  // do whatever you were going to do with your component
     <Component {...props} />
  // becasue we combined props into one object 
  // this is the same as <Header key={this.props.childKey} deleteHeader={this.props.deleteHeader}/> 
 }

Not sure if this is what you were trying to achieve please feel free to comment if not.

Answer 2

You don't need to use $ or single quotes when passing props these kind of props.. You just need to enclose the value to be evaluated in {}.. It is only when you need to pass a string literal do you use single quotes.

So use something like this instead

<Header key={this.props.childKey} deleteHeader={this.props.deleteHeader}/>