javascript - Concatenate a String and <a href=""><a> - Stack Overflow

admin管理员组

文章数量:1410712

I'm using ReactJS and I would like to have a string and then a link as below

const example = "Hello I'm a string" + <a href="/link">And this is a link</a>

At the moment I keep getting Hello I'm a string [object Object]

How do I get the text and the link to concatenate correctly?

I'm using ReactJS and I would like to have a string and then a link as below

const example = "Hello I'm a string" + <a href="/link">And this is a link</a>

At the moment I keep getting Hello I'm a string [object Object]

How do I get the text and the link to concatenate correctly?

• javascript
• reactjs
• string
• string-concatenation

Share Improve this question Follow asked Sep 8, 2020 at 12:14 helpmepiehelpmepie 24411 gold badge77 silver badges2020 bronze badges 3

• 1 Consider using a template string. – evolutionxbox Commented Sep 8, 2020 at 12:16
• Tried that, still get the same error – helpmepie Commented Sep 8, 2020 at 12:17
• 1 May you share that effort? I think we need to see how you use example in a render. – evolutionxbox Commented Sep 8, 2020 at 12:17

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

If you really need to do that, you'd use a React Fragment (or any wrapper element, like a span), like this:

const example = <>Hello I'm a string<a href="/link">And this is a link</a></>;

Or with the older more verbose syntax:

const example = <React.Fragment>Hello I'm a string<a href="/link">And this is a link</a></React.Fragment>;

Later where you want to use that within another ponent, you'd use a JSX expression, for instance:

return <div>{example}</div>;

Live Example:

// The Stack Snippets version of Babel is too old
// for <>...</> syntax.
function Example() {
    const example = <React.Fragment>Hello I'm a string<a href="/link">And this is a link</a></React.Fragment>;

    return <div>{example}</div>;
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>

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

But normally it's not necessary, you pose things when building your render tree (a class ponent's render method return value, or a functional ponent's return value). For instance:

function Example() {
    const msg = "Hello I'm a string";
    const link = <a href="/link">And this is a link</a>;

    // Composing them
    return <div>{msg}{link}</div>;
}

Live Example:

function Example() {
    const msg = "Hello I'm a string";
    const link = <a href="/link">And this is a link</a>;

    // Composing them
    return <div>{msg}{link}</div>;
}

ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>

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

For your approach to work you need to allow your HTML template to be infused with real code, in this case the <a></a> tag. That's a bit dangerous approach, because you are at the same time opening up your website for attacks, as it's possible for someone to inject code that would actually be ran on your server.

Although I say that, I'm not familiar enough with React to know if there is a way to inject code safely without being exposed to potential attacks.

I would advice you to break down the string and instead of concatenating the link, update your HTML template to be something like this: <p>{{helloString}} <a href="{{linkHref}}">{{linkString}}</a>.

You could also create the element pletely in JS and append it to the div you want it into: see W3C instructions on how to achieve that https://www.w3schools./JSREF/met_document_createelement.asp

You should either treat the variable as a React ponent (see other answer) or as a string:

const example2 = "Hello I'm a string" + '<a href="/link">And this is a link</a>'

本文标签： javascriptConcatenate a String and lta hrefquotquotgtltagtStack Overflow