Question

我有map函数，我想返回html字符串并连接到另一个字符串并以模式显示。我正在通过功能参数。该地图似乎返回了对象数组，我不确定如何将其转换为字符串

    let found = [];
found.push({source:'x',destination:'x',protocol:'x',ports:'x'});
found.push({source:'y',destination:'y',protocol:'y',ports:'y'});
let flows = found.map(function(name, index){
    return <li  key={index.toString()} >{name.source.toString()} {name.destination.toString()} {name.protocol.toString()} {name.ports.toString()}</li>
}).reduce((prev, curr) => [prev, ', ', curr]);

showConfirm('',`You are about to approve a local market exemption. Click to confirm! <ul>${flows}</ul>`,()=>{submitApprove(args);self.props.clearModal()},()=>self.props.clearModal(),confirmOptions);

show确认打开以下模式

    class ModalConfirm extends Component {
        ...

        render() {
            let yesDisabled = false;
            let yesText = 'Yes';
            let noDisabled = false;
            let noText = 'No';

            if (typeof this.props.modals.confirmOptions !== 'undefined') {
                yesDisabled = (typeof this.props.modals.confirmOptions.confirmYesDisabled !== 'undefined') ? this.props.modals.confirmOptions.confirmYesDisabled : false;
                yesText = (typeof this.props.modals.confirmOptions.confirmYesText !== 'undefined') ? this.props.modals.confirmOptions.confirmYesText : 'Yes';
                noDisabled = (typeof this.props.modals.confirmOptions.confirmNoDisabled !== 'undefined') ? this.props.modals.confirmOptions.confirmNoDisabled : false;
                noText = (typeof this.props.modals.confirmOptions.confirmNoText !== 'undefined') ? this.props.modals.confirmOptions.confirmNoText : 'No';
            }

            let bodyWrapper = 'Are you sure you want to confirm?';
            if (typeof this.props.modals.confirmMsg === 'string') {
                if (this.props.modals.confirmMsg.length > 0 || this.props.modals.confirmMsg !== null) {
                   bodyWrapper = Parser(this.props.modals.confirmMsg);
                }
                bodyWrapper = <div className="row-fluid" style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(bodyWrapper) }} />;
            }

            return (
                <Modal id="myModalReduxConfirm" className="modal fade" role="dialog" show={this.props.modals.showConfirm}>
                    {this.renderTitle()}
                    <Modal.Body>
                        {bodyWrapper}
                    </Modal.Body>
                    <Modal.Footer>
                        <Button bsClass="btn btn-success btn-sm" onClick={this.props.handleConfirmYes} disabled={yesDisabled}>{yesText}</Button>
                        <Button bsClass="btn btn-default btn-sm" onClick={this.props.handleConfirmNo} disabled={noDisabled}>{noText}</Button>
                    </Modal.Footer>
                </Modal>
            );
        }
    }
...

结果

You are about to approve . Click to confirm! <ul>[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object],, ,[object Object]</ul>

更新

我现在更改为以下内容，它不传递字符串，仅显示对象。

self.props.showConfirm('',() => flows,()=>{submitApprove(args);self.props.clearModal()},()=>self.props.clearModal(),confirmOptions);

console.log（this.props.modals.confirmMsg（））;

显示

{store: undefined, title: "", body: ƒ, show: true, handleConfirmYes: ƒ, …}body: ƒ ()clearModal: ƒ ()confirmOptions: {confirmYesText: "Confirm", confirmYesDisabled: false, confirmNoText: "Cancel", confirmNoDisabled: false}handleConfirmNo: ƒ ()handleConfirmYes: ƒ ()modals: {showConfirm: true, confirmTitle: "", confirmMsg: ƒ, handleConfirmYes: ƒ, handleConfirmNo: ƒ, …}show: truestore: undefinedtitle: ""__proto__: Object
main.bundle.js:200439 
[object Object][object Object][object Object][object Object][object Object][object Object]

您可以看到正文显示f，当我记录它时，它不会解释该对象

Answer 1

您的JSX元素无法在将它们与字符串混合的数组中呈现。并且将JSX与reduce一起使用通常会导致头痛。

一种快速解决问题的方法是直接映射数组，并检查元素是否不是要添加,的数组的最后一个：

const found = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

const App = props => (
    <p>
        You are about to approve . Click to confirm!
        <ul>
            {found.map(({ name, index }, i) => 
                <li key={index}> {name.source} {name.destination} {name.protocol} {name.ports}{i !== found.length - 1 && ','}</li>
            )}
        </ul>
    </p>
)


ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

或者通过保留代码，如果将逗号封装为JSX元素，则可以执行以下操作：

const found = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

const App = props => (
    <p>
        You are about to approve . Click to confirm!
        <ul>
            {found
                .map(({ name, index }) => <li key={index}> {name.source} {name.destination} {name.protocol} {name.ports}</li>)
                .reduce((prev, elem) => [prev, <span>,</span>, elem])}
        </ul>
    </p>
)


ReactDOM.render(<App/>, document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.2/umd/react-dom.production.min.js"></script>
<div id='root'>

您将需要添加一些CSS来使逗号保持内嵌

Answer 2

假设我已经找到了found1，found2和found3，基于单击的按钮更改，我切换并映射以循环结构吗？

const found1 = [
{
    name: {
        source: "eirglerk",
        destination: "zlekjrnzi"
    }
},
{
    name: {
        source: "lkcyukyuk",
        destination: "uylcl"
    }
},
{
    name: {
        source: "trutrurt",
        destination: "culcul"
    }
}
]

const found2 = [
    {
        name: {
            source: "eirglerk",
            destination: "zlekjrnzi"
        }
    },
    {
        name: {
            source: "lkcyukyuk",
            destination: "uylcl"
        }
    },
    {
        name: {
            source: "trutrurt",
            destination: "culcul"
        }
    }
]

var foundtype = "found1"

JSON.foundtype.map(() => { 
//Load found1 data
}

如何使用reactjs从地图返回字符串

2 个答案: