Question

这似乎很容易，但是由于某些原因我无法做到。

在React中，我有一个对象：

const test = {
  paragraphs: [
    'text of paragraph A text <a>link</a> text', //<a> tag will be printed just as a string
    'text of paragraph B text text',
  ]
}

我正在映射段落以使呈现的段落很少，就像这样。

test.paragraphs.map(item => <p>item</p>)

一切正常。但是，如果我想在第一段中放入链接标记，该怎么办。如何在数组的第一个字符串内嵌入html标签？

Answer 1

这是一个如何在reactjs应用程序中将字符串转换为HTML的示例

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<a href={to} target="_blank" {...rest}>{children}</a>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

React不会自动将字符串转换为JSX元素，而是按原样呈现。

因此，React允许您使用危险地设置InnerHTML道具将HTML代码注入HTML组件中。风险自负：）

请参阅文档here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#FFFFFF"
android:orientation="horizontal">

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/congregation_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="4dp"
        android:textColor="#000000"
        android:textSize="15sp"
        android:textStyle="normal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="MissingConstraints"
        tools:text="Leeds, Crossgates" />

</android.support.constraint.ConstraintLayout>

</LinearLayout>

Answer 3

使用String#replace。一个基本的正则表达式，用于查找网址，然后使用回调将链接包装在<a>

中

const test = {
  paragraphs: [
    'text of paragraph A text http://google.com',
    'text of paragraph B text text',
    'text of paragraph http://www.yahoo.com B text text',
    'text http://google.com of paragraph http://www.yahoo.com B text text',
  ]
};

const res = test.paragraphs.map(p=>{
   return `<p>${p.replace(/http(s)?\:\/\/(www.)?[a-zA-Z]+\.[a-z]+/g, (link)=>`<a href="${link}">${link}</a>`)}</p>`;
   
});

document.body.innerHTML = res.join("");

将html标记放在字符串中

3 个答案: