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

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

减速器

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

onAddHeader（）{
this.props.addHeader（）；
this.props.updateHeader(
``,
);
}

deleteHeader函数正在传递给Header组件，但问题是它是作为字符串传递的，而不是作为函数传递的

我把它渲染成这样

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

`{this.props.headerChildren.map（（值，索引）=>(
))}`

有人能指导我解决这个问题吗。我找了很多，找不到一个办法。如果这不是正确的方法，请告诉我正确的方法。我对React+Redux还不熟悉，所以觉得有点难

---

提前感谢

在传递这些道具时，您不需要使用$或单引号。。您只需要将要计算的值括在{}中。。只有在需要传递字符串文字时，才使用单引号

所以用这样的方法来代替

---

我将尝试猜测我认为您希望在这里实现的目标-这有点不清楚，因此如果我错了，请随时发表评论，我可以尝试修复

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

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

我将您的道具转换为1键对象，因此可以灵活地添加更多/更少道具，而无需修改

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

函数更新头（组件、道具）{
//做任何你想对你的组件做的事情
//因为我们把道具组合成一个物体
//这和
}

不确定这是否是您试图实现的，如果不是，请随时发表评论。
这是我在标题中获得的道具，根据您的建议
Key“{this.props.childKey}”
deleteheader:“{this.props.deleteheader}/”
“$从未在react afaik中使用”=>$此处使用的$与jquery无关。这是一种es6语法，用于在string@Prakash中编写表达式。我很抱歉。我没有意识到。。我回答时没有想到这个用法。。谢谢你指出这一点out@leoc1f3r您能告诉我为什么要将组件传递到此.props.updateHeader（）吗？？该函数的作用是什么？@JiN
this.props.updateHeader
动态地将标题组件从侧栏渲染到内容部分。updateHeader记录我拥有的头的总数，并将其传递给JSX解析器，该解析器将其呈现给内容部分，以及在模板文本中传递的道具，
updateHeader
函数接受一个参数，这里是Header，并将其作为字符串存储在headerComponents数组中。然后，我使用它映射所有headerComponents，并使用
{this.props.headerChildren.map（（value，index）=>（））}
@leoc1f3r解析它们为什么它必须存储为字符串？假设你说的[header]是指实际的组件，在这种情况下，你需要的是组件，而不是字符串。此外，如果您试图解析jsx组件，您需要首先将其拉出，不是吗？react组件本身就是一个函数。我尝试将其存储为组件本身，但问题是reducer无法将其识别为react组件，也无法呈现它。我找不到任何解决方案。@leoc1f3r您可以将组件作为参数传递-它们只是函数本身。只要确保你通过标题，而不是。另外，还原程序只是更新状态-它不应该关心它是什么，你只是将它传递给props/state/随便什么。我将用代码的其他部分更新我的问题。如果你能帮我，请告诉我