reactjs 如何在JSX元素中将字符串设置为动态属性

qgelzfjb  于 2022-12-22  发布在  React
关注(0)|答案(1)|浏览(119)

我想在JSX元素的属性中添加一个文本字符串。看下面的例子,其中变量otherAttributes是一个字符串。实际上,在我的例子中,它是一个来自CMS的变量,我想将它作为属性添加。

const otherAttributes = 'target="_blank" rel="follow"';
<a href={href || ''} class="inline-block px-4 py-2 rounded-full" {...otherAttributes}>{text}</a>

输出为

<a 0="&quot;" 1="t" 2="a" 3="r" 4="g" 5="e" 6="t" 7="=" 8="\" 9="&quot;" 10="_" 11="b" 12="l" 13="a" 14="n" 15="k" 16="\" 17="&quot;" 18="&quot;" href="" class="inline-block px-4 py-2 rounded-full" >See more</a>
pkmbmrz7

pkmbmrz71#

这对我有用

import React from 'react';

export function App(props) {
  const otherAttributes = {
    target: '_blank',
    rel: 'follow'
  };
  const href = '';
  const text = "hello";
  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <a href={href || ''} className="inline-block px-4 py-2 rounded-full" {...otherAttributes}>{text}</a>
    </div>
  );
}

// Log to console
console.log('Hello console')

相关问题