Таблица в дизайне Ant: передача строки в метод визуализации в атрибуте столбца

Question

Я использую Ant design в своем реактивном проекте и хочу добавить строку в атрибут render для структуры столбца.

Вот обычный код.

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Divider, Tag } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => <a>{text}</a> // <<<< Want to pass string here
  }

];

const data = [
  {
    key: '1',
    name: 'John Brown',

  },
  {
    key: '2',
    name: 'Jim Green',
   },
  {
    key: '3',
    name: 'Joe Black',
   },
];

ReactDOM.render(<Table columns={columns} dataSource={data} />, document.getElementById('container'));

Сейчас в приведенном выше коде я передаю код JSX в строке для отображения в столбце. Но у меня есть строка, которую я хочу визуализировать.

import React from 'react';
import ReactDOM from 'react-dom';
import { Table, Divider, Tag } from 'antd';

const fun = "text => <a>{text}</a>"  // this string I want to render

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: fun // <<<< no passing string here I do know I need to covert this string into something
  }

];

const data = [
  {
    key: '1',
    name: 'John Brown',

  },
  {
    key: '2',
    name: 'Jim Green',
   },
  {
    key: '3',
    name: 'Joe Black',
   },
];

ReactDOM.render(<Table columns={columns} dataSource={data} />, document.getElementById('container'));

Какой подход мне нужен для запуска и выполнения кода, который даст мне тот же результат, что и выше.

ПРИМЕЧАНИЕ: Я получаю эту строку из Back-end

. Любая помощь для решения этой проблемы будет оценена.

Answer 1

Я решаю проблему, используя язык шаблонов. Я использовал коротко шаблонный язык.

Как вы видите в приведенном ниже коде.

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table, Divider, Tag } from 'antd';
import * as sqrl from "squirrelly";

const render = "<a>{{data}}</a>"

const htmlNode = (text) =>{
  /**
   *we are formating a data in the particular format so that
   *we can use it along with squirrelly templating
   */ 
  const data  = {data : text} 
  /**
   * In the below code we are ,merging the html string and data together 
  */
  const __html = sqrl.Render(render, data || []); 
  return <div dangerouslySetInnerHTML={{__html}}/> 
}

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: text => htmlNode(text)
  }

];

const data = [
  {
    key: '1',
    name: 'John Brown',

  },
  {
    key: '2',
    name: 'Jim Green',
   },
  {
    key: '3',
    name: 'Joe Black',
   },
];

ReactDOM.render(<Table columns={columns} dataSource={data} />, document.getElementById('container'));

Answer 2

Вы можете использовать тот же шаблон вместо использования в качестве строки, как вместо

const fun = "text => <a>{text}</a>"

Вы можете написать как:

const fun = text => <a>{text}</a>

Пожалуйста, проверьте демо по адресу:

.