मैं अपनी प्रतिक्रिया परियोजना में चींटी डिजाइन का उपयोग कर रहा हूं और कॉलम संरचना के लिए रेंडर विशेषता में स्ट्रिंग जोड़ना चाहता हूं।

यहाँ एक सामान्य कोड है।

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'));

कोड को चलाने और निष्पादित करने के लिए मुझे किस दृष्टिकोण का पालन करने की आवश्यकता है जो मुझे ऊपर जैसा ही परिणाम देगा।

नोट: मुझे यह स्ट्रिंग बैक-एंड से मिल रही है

इस मुद्दे को हल करने में कोई मदद की सराहना की जाएगी।

1
amy 16 जिंदा 2020, 22:28

2 जवाब

आप स्ट्रिंग के रूप में उपयोग करने के बजाय उसी पैटर्न का उपयोग कर सकते हैं जैसे . के बजाय

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

आप इस प्रकार लिख सकते हैं:

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

कृपया डेमो यहां देखें:

संपादित करें antd-menu-click-rendering.

0
Triyugi Narayan Mani 17 जिंदा 2020, 12:14
मुझे एक स्ट्रिंग प्रारूप में सामग्री प्रस्तुत करना मिल रहा है। यही मुद्दा है। धन्यवाद।
 – 
amy
17 जिंदा 2020, 21:45

मैं टेम्प्लेटिंग भाषा का उपयोग करके समस्या का समाधान करता हूं। मैंने गिलहरी की टेंपलेटिंग भाषा का इस्तेमाल किया है।

जैसा कि आप नीचे दिए गए कोड में देख सकते हैं।

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'));

0
amy 17 जिंदा 2020, 21:56