0

所以这是一个完美的反应代码

const about={
  text1: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere, qui?',
  text2: 'eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?'
}

function App() {

  const [text, setText] = useState(about)
  const [switchh, setSwitch] = useState(false)

  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
     <h1>{switchh ? text.text1 : text.text2}</h1>
    </div>
  );
}

export default App;

这段代码可以正常工作，但是我似乎找不到添加换行符的方法。我希望它看起来像这样

<h1>Lorem, ipsum dolor sit amet<br/> consectetur adipisicing elit. Facere, qui?</h1>

我如何在使用状态时实现这一点，因为我也需要开关

4

4 回答 4

2

试试这个方法，

像下面一样用作自身html的值，text1

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

完整代码：-

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [text, setText] = useState(about);
  const [switchh, setSwitch] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
      <h1>{switchh ? text.text1 : text.text2}</h1>
    </div>
  );
}

工作代码 - https://codesandbox.io/s/determined-feather-qd7me?file=/src/App.js

于 2020-11-25T08:55:47.410 回答
1

如果您可以更改 about 对象的内容，并且您不介意为元素添加一些 css，您可以尝试以下操作：

const about={
  text1: 'Lorem, ipsum dolor sit amet \n consectetur adipisicing elit. Facere, qui?',
  text2: 'eligendi voluptates nesciunt \n quam dolor reiciendis dolorum voluptas? Labore, a pariatur?'
}

... 

<h1 className='my-text'>{switchh ? text.text1 : text.text2}</h1>

和CSS：

.my-text {
  white-space: pre-wrap;
}
于 2020-11-25T07:58:10.223 回答
1

将 react 元素存储在 state 中不是一个好习惯，尽量不要使用保留字，例如switch. 如果一个状态包含一个布尔值，一个好的做法是以“is”或“has”开头的变量命名。

我的解决方案：

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: (
    <h1>
      Lorem, ipsum dolor sit amet
      <br /> consectetur adipisicing elit. Facere, qui?
    </h1>
  ),
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [isSwitchedOn, setIsSwitchedOn] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setIsSwitchedOn(!isSwitchedOn)}>switch</button>
      <h1>{isSwitchedOn ? about.text1 : about.text2}</h1>
    </div>
  );
}
于 2020-11-25T09:35:16.590 回答
0

您可以使用数组并将其映射到 {text}

import React, { useState } from "react";
import "./styles.css";

const about = {
  text1: [
    'Lorem, ipsum dolor sit amet',
     'consectetur adipisicing elit. Facere, qui?'
  ],
  text2:
    "eligendi voluptates nesciunt quam dolor reiciendis dolorum voluptas? Labore, a pariatur?"
};

export default function App() {
  const [text, setText] = useState(about);
  const [switchh, setSwitch] = useState(false);
console.log(text.text1)
  return (
    <div className="App">
      <button onClick={() => setSwitch(!switchh)}>switch</button>
      <h1>{switchh ? text.text1.map(line=>(<React.Fragment key={line}>{line}<br/></React.Fragment>)) : text.text2}</h1>
    </div>
  );
}
于 2020-11-25T08:09:32.517 回答