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

Question

我想将我的操作中定义的函数传递给元素。

reducer

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

Action.js

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

我正在将此操作传递到我的侧边栏

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

deleteHeader 函数被传递到 Header 组件，但问题是它是作为字符串而不是函数传递的。

我将其渲染为这样

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

有人可以指导我解决问题吗？我进行了很多搜索，但找不到方法。如果这不是正确的方法，请让我知道正确的方法。我是 React + Redux 的新手，所以发现它有点困难。

提前致谢

Answer 1

我将尝试猜测我认为你想在这里实现什么 - 这有点不清楚，所以如果我错了，请随时发表评论，我可以尝试修复。

如果您不尝试传递字符串，则无需使用字符串模板。您可以简单地传递组件和 Prop 本身。像这样的事情...

// 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 
       }
    );
}

我将您的 props 转换为 1 个键控对象，因此可以灵活地添加更多/更少的 props，而无需修改 updateHeader 函数必须采用的参数数量。

然后你的updateHeader会做类似的事情:

 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}/> 
 }

不确定这是否是您想要实现的目标，如果不是，请随时发表评论。