Question

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

减速

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

我打算猜测我认为你想在这里实现的目标 - 有点不清楚，如果我错了，请随意评论，我可以尝试修复。

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

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

我将你的道具变成了一个键控对象，因此可以灵活地添加更多/更少的道具，而无需修改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}/> 
 }

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

Answer 2

在传递道具这些道具时，你不需要使用$或单引号..你只需要在{}中包含要评估的值..只有当你需要传递一个字符串时你是否使用单引号？

所以改用这样的东西

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

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

2 个答案: