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

然后应用程序将工作..