Question

我想创建一个像这样的react组件。我希望这个h1标签是动态的。我试图将其设置为道具，但没有成功。如何使此h1标签动态化，以便在使用此组件时可以将其设置为h1，h2，h3等。

import React from 'react';
import PropTypes from 'prop-types';

const Text = props => {
   const { className, text } = props;

   return (
      <h1 className={className}>
         {text}
      </h1>
   );
} 

Text.propTypes = { 
   className: PropTypes.string,
   text: PropTypes.string.isRequired
}

export default Text;

Answer 1

实际上，它会像这样工作。您在哪里指定了相关的CSS？

这是您的Text组件的一个示例： https://codesandbox.io/s/mzqyp52w8x

<div className="App">
 <Text className="big" text="my big h1 headline" />
 <Text className="normal" text="my normal h1 headline" />
 <Text className="smaller" text="my normal h1 headline" />
 <Text className="small" text="my small h1 headline" />
</div>

以及CSS中的规范：

.big {
  font-size: 40px;
}

.normal {
  font-size: 25px;
}

.smaller {
  font-size: 18px;
}

.small {
  font-size: 10px;
}

Answer 2

我找到了答案。在这里。

{{1}}

使用动态h1，h2，h3等标签对组件进行反应

2 个答案: