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

用道具反应设置标题级别

1 个答案: