使用 Props React 设置标题级别

Question

只是想知道是否可以通过将 props 向下传递到基本组件来设置标题级别。

例子：

基础组件

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。）