如何将包含字符串中span元素的HTML对象转换为Reactjs实际可以呈现为HTML的内容?
澄清一下,这就是我所拥有的:
let myObject = "apple tree"
我编写了一个函数,用于在span标记(html对象)中包装单词apple
<span style="color: red;">apple</span>tree
我的网站正在显示:
[object Object] tree
但它应该显示
apple tree
其中&#34; apple&#34;是红色的,因为它包裹在一个跨度
我将字符串传递给我的组件,如下所示:
return (<div>{myObject}</div>)
不确定如何将此对象渲染为实际的HTML元素,并且不确定我是否在做危险的SetInnerHTML也是最好的唯一选择
答案 0 :(得分:0)
这个怎么样?
{<span style="color: red;">{'apple'}</span>tree}
Lemme知道它是否有效。
答案 1 :(得分:0)
如果你想渲染一个HTML对象,它就是
let myObject=<span style="color: red;">apple</span>;
return (<div>{myObject} tree</div>);
如果您正在执行此类return (<div>{this.getRedApple()} tree</div>);
之类的操作,那么在您的getRedApple()
函数中,您应该像这样返回变量:
let myObject=<span style="color: red;">apple</span>;
return (myObject);
不要这样:return ({myObject})
答案 2 :(得分:0)
为它创建组件
class Apple extends Component {
render() {
return <span color={this.props.style.color} >{this.props.strApple}</span>tree;
}
}
使用该组件;
const style = { color: 'red' };
const element = <Apple strApple="apple tree" style="style "/>;
渲染它
ReactDOM.render(
element,
document.getElementById('root')
);
答案 3 :(得分:0)
这里已经回答了这个问题。 Insert value of object into span tag
参考 Nitin Dhomse 的回答,你可以这样做:
let myObject = "apple tree";
<span id="span" style="color: red"></span>
$("#span").text(myObject);
这将为您提供所需的输出。