ReactJS如何在字符串中呈現HTML對象span元素

Question

如何將包含字符串內的span元素的HTML對象轉換爲Reactjs可以實際呈現爲HTML的內容？

爲了澄清，這是我有：

let myObject = "apple tree" 

我寫了一個包裝字蘋果的跨度標籤的功能（HTML對象）

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

我的網站顯示：

[object Object] tree 

但它應該顯示

apple tree 

在那裏，因爲它被包裹在一個跨度

我傳遞串入我的組件這樣的「蘋果」是紅色：

return (<div>{myObject}</div>) 

不知道如何使這個對象實際的HTML元素，並不知道如果我做的危險SetInnerHTML是這裏最好也是唯一的選擇

Answer 1

這個怎麼樣？

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

還是讓我知道，如果它的工作原理。

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