用道具反应设置标题级别

Question

只是想知道是否有通过将道具传递到基础组件来设置标题级别.

例:

基础组件

class Heading extends Component {
 render() {
  return (
    <h{this.props.headinglevel} className={this.props.titleStyle}>
        {this.props.title}
    </h{this.props.headinglevel}>
  );
 }
}
export default Heading;

父组件(传递道具)

class HomeHeader extends Component {
 render() {
  return (
      <Heading headinglevel="1" titleStyle="big-header" title="Hello World" />
  )
 }
}

export default HomeHeader;

当我尝试这个时,我得到一个语法错误.

Answer 1

对!使标记成为变量的方法是这样的:

render() {
    const Tag = 'h1';
    return <Tag>{/* some code here */}</Tag>;
}

注意Tag是大写的.您需要将标记变量大写,以便React理解它不仅仅是普通的HTML元素.

所以在你的情况下,你可以这样做:

render() {
  const Tag = 'h' + this.props.headinglevel; // make sure this has a default value of "1" or w/e
  return (
    <Tag className={this.props.titleStyle}>
        {this.props.title}
    <Tag>
  );
}

(如果您是安全的,您可能需要添加一些支票,因此this.props.headinglevel只能是1-6.)