javascript - Return a React's method 'return' as a string - Stack Overflow

admin管理员组

文章数量:1434916

I'm using the Drop javascript library, and I get this error:

Drop Error: Content function should return a string or HTMLElement.

I'm using React to handle a click, and then open the Drop popup.

popupContent: function() {
  return (
    <div>
      <p>Test.</p>
    </div>
  )
},

initDrop: function() {
  var self = this;
  var drop = new Drop({
    target: self.refs.xxx,
    openOn: 'click',
    content: function() {
      self.popupContent();
    }
  });
},

---

How can I make the popupContent function return as a string?

I'm using the Drop javascript library, and I get this error:

Drop Error: Content function should return a string or HTMLElement.

I'm using React to handle a click, and then open the Drop popup.

popupContent: function() {
  return (
    <div>
      <p>Test.</p>
    </div>
  )
},

initDrop: function() {
  var self = this;
  var drop = new Drop({
    target: self.refs.xxx,
    openOn: 'click',
    content: function() {
      self.popupContent();
    }
  });
},

---

How can I make the popupContent function return as a string?

• javascript
• string
• reactjs

Share Improve this question Follow asked Feb 24, 2016 at 20:36 Sergio TapiaSergio Tapia 9,8451313 gold badges3737 silver badges6060 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You should return String from popupContent because now popupContent returns JSX but JSX is not a String

popupContent: function() {
  return (
    '<div>' +
      '<p>Test.</p>' +
    '</div>'
  )
},

if you use ES2015 you can use Template literals

popupContent: function() {
  return (
    `<div>
      <p>Test.</p>
    </div>`
  )
},

also there is package jsx-to-string(note - you should install it)

popupContent: function() {
  return jsxToString(
    <div>
      <p>Test.</p>
    </div>
  )
},

Example

本文标签： javascriptReturn a React39s method 39return39 as a stringStack Overflow