javascript - 如何创建一个呈现为 <div> 的简单 React 组件,该组件将文本 value 和前景色作为输入

我是 React 世界的新手,在查看教程并编写了一些代码后,我想知道是否可以将 value 和颜色等属性添加到 div。我的意思是,我如何返回带有颜色的 Hello World。下面是一个例子:

<div style="color: red;">Hello World!</div>

我尝试使用构造函数,但我无法渲染颜色和“Hello World!

回答1

在 JSX 文件中,您将使用 <div style={{color: 'red'}}>Hello World!</div>

回答2

我会为此使用一个类。

function Example() {
  return (
    <div className="red">
      Hello world!
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);
.red { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

或者,如果您将 props 传递给另一个组件,您仍然可以使用此方法。只需将颜色作为 prop 传递,然后使用 className={color}

function Example() {
  return <Hello color="red" />
}

function Hello({ color }) {
  return (
    <div className={color}>
      Hello world!
    </div>
  );
}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);
.red { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

相似文章

html - CSS 紧凑水平树

我有一个包含嵌套列表(<ul>+<li>)的HTML。我想使用CSS将其显示为紧凑的水平树。https://codepen.io/Hojy/pen/OzXbvp几乎完全符合我的要求,但我想让树更紧凑—...