Question

我对react-redux很新。所以我需要一些帮助来尝试理解这里的语法...

我有一个档案：的 SampleA.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { fetchNames, fetchDownloadLink } from '../../actions/actions'
import SampleChild from '../ui/SampleChild'

class SampleParent extends Component {
constructor(props) {
super(props) ;
}

componentDidMount() {
const { dispatch } = this.props
dispatch(fetchNames());
}

render() {
return(<div><ul id="myUL">{this.props.reports.map((report) => (
                <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")}
                    />
                </li>))}</ul></div>)}
}

function mapStateToProps(state) {
const { reports } = state
return {
reports
}
}

export default connect(mapStateToProps)(ReportsApp)

我需要将函数'fetchDownloadLink'的输出传递给SampleChild组件。我不知道该怎么做。 'fetchDownloadLink'返回一个url字符串。

请有任何想法...... 提前谢谢..

Answer 1

如果要传递函数的结果，那么调用函数并将结果保存在局部变量

中

render() {
const uri = fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")
return(<div><ul id="myUL">{this.props.reports.map((report) => (
                <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={uri}
                    />
                </li>))}</ul></div>)}
}

要在uri内计算不同的map，请执行此操作，

render() {

return(<div><ul id="myUL">
            {this.props.reports.map((report) => {
                const uri = fetchDownloadLink("http://localhost:8080/sample"+this.props.uri+".pdf")
                return <li>
                    <SampleChild
                        key={report.id}
                        label={report.label}
                        uri={uri}
                    />
                </li>})}</ul></div>)}
}

将函数的输出作为参数传递给redux中的组件

1 个答案: