我如何创建一个简单的 React 组件，呈现为<div>它将文本值和前景色作为输入

Question

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

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

我尝试使用构造函数，但无法渲染“Hello World！

Answer 1

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

Answer 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 传递给另一个组件，您仍然可以使用此方法。 只需将颜色作为道具传递，然后使用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>