Question

我正在尝试传递一个数组

array1 = [{id: 1,
           summary: 'test',
           details: 'Spicy jalapeno bacon ipsum dolor amet beef ribs chuck 
           burgdoggen landjaeger short ribs jowl, biltong ham hock cow 
           hamburger capicola pork loin. Biltong pig tenderloin sirloin 
           porchetta sausage alcatra \n landjaeger spare ribs andouille 
           drumstick chuck. Fatback chicken turkey picanha beef ribs pork 
           loin cupim ball tip kevin prosciutto. \n T-bone strip steak 
           pastrami alcatra fatback shankle short ribs. Venison tri-tip 
           picanha, sausage sirloin tongue porchetta. Alcatra strip steak 
           tail meatball ribeye sausage.'}];

说我对数组有这个，我希望它在看到\ n

时添加一个新行

import React from 'react';
import Accordion from './Accordion';

export default class Accordions extends React.Component {
    render(){
        return(
            <ul style={{listStyleType:"none"}}>
                {this.props.TheBasics.map((basics)=> {
                    return <Accordion basics={basics} key={basics.id} />
                })}
            </ul>
        );
    }
}

那是什么读取数组和

import React from 'react';

export default class Accordion extends React.Component {
    constructor(){
        super();
        this.state = {
            active: false
        };
        this.toggle = this.toggle.bind(this);
    }

    toggle(){
        this.setState({
            active: !this.state.active
        });
    }



    render(){

        let {basics, awu, IHaSL} = this.props;

        const stateStyle = this.state.active ? styles.active : 
        styles.inactive;

        const hand = {
            cursor:"pointer",
        }

        return (
            <li>
                {basics ?
                    <p onClick={this.toggle} style={hand}>
                        {this.state.active ? "▼" : "►"} {basics.summary}
                    </p>
                :null}
                <p style={stateStyle}>
                    {basics && basics.details}
                </p>
                {awu ?
                    <p onClick={this.toggle} style={hand}>
                        {this.state.active ? "▼" : "►"} {awu.summary}
                    </p>
                :null}
                <p style={stateStyle}>
                    {awu && awu.details}
                </p>
                {IHaSL ?
                    <p onClick={this.toggle} style={hand}>
                        {this.state.active ? "▼" : "►"} {IHaSL.summary}
                    </p>
                :null}
                <p style={stateStyle}>
                    {IHaSL && IHaSL.details}
                </p>
            </li>
        )
    }
}

Thats Accordion让你知道它正在制作一个扰流盒，

但我需要能够做到这一点，以便它会在每个\ n

处换行

如果你想要更多解释，请问我不是最好的解释事情

Answer 1

一种解决方案是，首先将所有\n替换为<br/>标记，然后按dangerouslySetInnerHTML呈现字符串。

示例：

let a = 'dvnkvjdfvdf <br/> kdb kdf';
a = a.replace(new RegExp('\n', 'g'), '<br/>');

<div dangerouslySetInnerHTML={{__html: a}}/>

在您的代码中：

<p style={stateStyle}>
    {   
        basics ? 
            <div dangerouslySetInnerHTML={{__html: basics.details.replace(new RegExp('\n', 'g'), '<br/>')}} />
        : null
    }
</p>

React Js数组字符串中的新行传递道具

1 个答案: