Question

如何将包含字符串中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也是最好的唯一选择

Answer 1

这个怎么样？

{<span style="color: red;">{'apple'}</span>tree}

Lemme知道它是否有效。

Answer 2

如果你想渲染一个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})

Answer 3

为它创建组件

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

Answer 4

这里已经回答了这个问题。 Insert value of object into span tag

参考 Nitin Dhomse 的回答，你可以这样做：

let myObject = "apple tree";
<span id="span" style="color: red"></span>
$("#span").text(myObject);

这将为您提供所需的输出。

ReactJS如何在字符串中呈现HTML对象span元素

4 个答案: