0
137
ViewsCómo dividir una cadena larga en una cadena de varias líneas, pero la cadena es un valor dentro de un objeto javascript
Estoy creando una página de preguntas frecuentes para un sitio, y en lugar de escribir estáticamente cada pregunta y respuesta en cada componente, decidí crear una matriz de objetos con cada pregunta y respuesta dentro de ella, y luego mapear la matriz para hacer mi el código de reacción se ve más limpio.
Algunas de las respuestas son párrafos, pero quiero dividir algunos de los párrafos en varios párrafos más pequeños.
Probé \n dentro de acentos graves y \n entre comillas simples y dobles, pero el párrafo no se divide en varias líneas en el navegador. ¿Tiene algo que ver con estar dentro de un objeto y por eso no agregará una nueva línea con \n?
Aquí está mi objeto de preguntas frecuentes:
export const faqData = [{ question: "Can we make this product personalized?", answer: "Yes, all products can be personalized. Please visit our shop page for all personalized options.\n You can view the shop page here." },Aquí está mi componente:
import React from "react"; import Title from "./title/Title"; import Questions from "./faqs/Questions"; import { faqData } from "./utils/faqs"; const FAQ = () => { return ( <div className="Div"> <Title /> {faqData.map(({ question, answer }) => ( <Questions question={question} answer={answer} /> ))} </div> ); }; export default FAQ;2 answers
Answer question0
Desafortunadamente, no podemos ver cómo está dividiendo la cadena en el componente Questions con su código mostrado. Debería ser un mapeo bastante simple en string.split('\n') .
En el retorno de su componente Questions , debería verse algo similar a:
return ( <div className="Questions"> <h2>${props.question}</h2> { props.answer.split('\n').map((paragraph) => { return <p>{paragraph}</p>; } } </div> ) Esto dividirá la answer en una serie de cadenas divididas por \n y luego las asignará a etiquetas de párrafo individuales.
0
Para una solución diferente para mostrar varias líneas en lugar de \n , puede formatear su answer en HTML (para usar <br /> ) y usar dangerouslySetInnerHTML SetInnerHTML ( advertencia )
const faqData = [ { question: "1 Can we make this product personalized?", answer: "Yes, all products can be personalized." }, { question: "2 Can we make this product personalized?", answer: "Yes, all products can be personalized. Please visit our shop page for all personalized options.<br /> You can view the shop page here." } ]; const Title = () => <h1>FAQ</h1>; const Questions = ({ question, answer }) => ( <div> <h3>{question}</h3> <p dangerouslySetInnerHTML={{ __html: answer }} /> </div> );demostración completa
