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 wrap开头

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

然后App将会工作..

反应Js组件动态Cahnge h1标签

2 个答案: