React Js 組件動態改變 h1 標簽

Question

這是我的代碼：

import React, { Component } from 'react';
import { Link } from 'react-router'

export default class Header extends Component {

  render() {
    return (
      <h1 className="title"><img src="back.png" className="pull-left"/>{this.props.somefield*}</h1>
     <ul className="main_menu">

      <li><Link to="/" className="active"><i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link></li>
      <li><Link to="/favorite"><i className="fa fa-heart" aria-hidden="true"></i><br/>Favorite</Link></li>
      <li><Link to="/find"><i className="fa fa-search" aria-hidden="true"></i><br/>Find</Link></li>
      <li><Link to="/settings"><i className="fa fa-cog" aria-hidden="true"></i><br/>Settings</Link></li>
    </ul>
    )}
  }

}

上面的字段用作組件，我的組件被使用：

<Header *and Some fields/>

我如何以正確的方式使用它？

Answer 1

道具可以作為屬性傳遞：

<Header someField='Foo' />

//...
render() {
  return (
    <h1 className="title">
      <img src="back.png" className="pull-left"/>
      {this.props.someFeild}
    </h1>
  )
}

Answer 2

添加組件的 span 或 div 包裝開頭

export default class Header extends Component {

render() {


return (
 <span>
   <h1 className="title"><img src="back.png" className="pull-left"/> {this.props.name}</h1>

  <ul className="main_menu">

      <li><Link to="/" className="active"><i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link></li>
      <li><Link to="/favorite"><i className="fa fa-heart" aria-hidden="true"></i><br/>Favorite</Link></li>
      <li><Link to="/find"><i className="fa fa-search" aria-hidden="true"></i><br/>Find</Link></li>
      <li><Link to="/settings"><i className="fa fa-cog" aria-hidden="true"></i><br/>Settings</Link></li>
  </ul>
 </span> 
 );
 }
 }

然后應用程序將工作..