如何列印內容中有鏈接的文本？

如何在里面列印內容我想放一個鏈接

我正在嘗試這個

setContent(`hi 
    ${(
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
    )}
    their car is ${him.car} 
    and house is ${him.house}`)

但我得到了這個

hi [object Object] their car is 1 and house is 1

我還需要顯示斷線

hi [object Object]  
their car is 1  
and house is 1

我是這樣渲染的：

 <DialogContent>{content}</DialogContent>

uj5u.com熱心網友回復：

你 setContent 使用模板文字意味著它將是一個字串，而不是 JSX

我建議你把它包裝起來，<div>不要使用模板文字。

  const him = {
    first_name: "jon",
    last_name: "doe"
  };
  const [content, setContent] = useState(
    <div>
      hi 
      <Typography className={classes.link} onClick={showProfile}>
        ${him.first_name} ${him.last_name}
      </Typography>
      their car is ${him.car}
      and house is ${him.house}
    </div>
  );

https://codesandbox.io/s/react-playground-forked-f3qc3?file=/index.js

uj5u.com熱心網友回復：

作為一般規則，不應使用 React 狀態來存盤 HTML；它應該處理簡單的資料結構，當狀態更新時，你的 React 組件將渲染這些資料結構。

在這個例子中，我創建了一個物件陣列，并將它們添加到 state。我還有其他幾個狀態 - 第一個是維護當前選定的人，另一個是更改Dialog（我不知道哪個庫 - 如果你使用的是哪個庫 - 所以我必須自己制作） .)

React 迭代資料以創建名稱串列。如果您單擊一個名稱，selected狀態將使用該物件從 更新data，并且對話框將出現。如果您選擇其他名稱，對話框將簡單地更新。如果單擊關閉按鈕，對話框將隱藏。

const { useState } = React;

const initialState = [
  { id: 1, firstName: 'Bob', lastName: 'Jones', car: 'Saab', house: '999 Letsbe Avenue' },
  { id: 2, firstName: 'Dave', lastName: 'Scott', car: 'Pinto', house: '12 Lake Lane' },
  { id: 3, firstName: 'Karen', lastName: 'Smith', car: 'Bicycle', house: '3 Joyless Terrace' }
];

function Example() {

  const [data, setData] = useState(initialState);
  const [selected, setSelected] = useState(false);
  const [visible, setVisible] = useState(false);
  
  // Get the id from the clicked name, `find` that
  // object in the data, and update the `selected` state with it.
  // Update the visibility of the dialog state.
  function handleClick(e) {
    const { id } = e.target.dataset;
    const person = data.find(person => person.id ===  id);
    setSelected(person);
    setVisible(true);
  }
  
  // When the dialog button is clicked
  // hide the dialog
  function handleClose() {
    setVisible(false);
  }
  
  // `map` over the data and add the dialog
  // If a name is clicked on call `handleClick`.
  // `handleClick` will update the state and the
  // dialog will appear
  return (
    <div>
      {data.map(person => {
        return (
          <div
            className="person"
            data-id={person.id}
            onClick={handleClick}
          >{person.firstName}
          </div>
        );
      })}
      {visible && (
        <Dialog
          person={selected}
          handleClose={handleClose}
        />
      )}
    </div>
  );
  
}

function Dialog({ person, handleClose }) {
  return (
    <div>
      <div>
        <p>First Name: {person.firstName}</p>
        <p>Last Name: {person.lastName}</p>
        <p>Car: {person.car}</p>
        <p>House: {person.house}</p>
      </div>
      <button onClick={handleClose}>Close</button>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.visible { display: block; }
.person { padding: 0.3em; background-color: #efefef; margin-bottom: 0.2em; border: 1px solid #454545; }
.person:hover { cursor: pointer; background-color: #dfdfdf; }

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

標籤：javascript 反应

上一篇：Javascript函式將輸出回傳為未定義

下一篇：是否有使影像不可點擊的功能，以便不會出現默認的chrome小部件并允許他們下載影像？