javascript - 使用 Props React 设置标题级别

Question

只是想知道是否有通过将 Prop 向下传递给基本组件来设置标题级别的方法。

例子:

基础组件

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