javascript - 无法使内联样式在 React 中工作

Question

我是新手，对 html/css/javascript 还是菜鸟。我试图让我的 RandomNumberButton 与我的 h2 标记文本位于同一行。我相信答案只是将两个元素都放在一个 div 标记中，并将 css 显示属性设置为内联。我尝试将它包装在具有该样式的 div 标签中，但没有成功。让我知道我能做什么。

这是我的 App.jsx 中的渲染函数

render: function () {
return (
  <div>
    <h2> Hello, {this.state.name}! </h2>
    <MyForm />
    <div style={{"display": "inline"}}> <RandomNumberButton /> <h2>Random Number: {this.state.randomNumber}</h2></div>
  </div>
);

和我的 RandomNumberButton.jsx 渲染函数

render: function () {
  return (
      <button onClick={this._generateRandomNumber}>Generate a random number</button>
  );
}

我将代码更新为不包含可能无关的 div 标签，试图使 h2 标签与 RandomNumberButton 元素内嵌显示

Answer 1

我不知道为什么这段代码对你不起作用。您也可以使用对象来实现它。下面的示例和 fiddle :

var AppStyle = {
  divStyle : {
    display : 'inline'
  }
  // , here you can add lots of another styles for your component
}

然后在您的组件中，您可以将其分配给样式

render: function () {
  return (
    <div>
      <h2> Hello, {this.state.name}! </h2>
      <MyForm />
      <div style={AppStyle.divStyle}> // JS object
        <RandomNumberButton /> 
        <h2>Random Number: {this.state.randomNumber}</h2>
      </div>
  </div>
);

希望对您有所帮助。

谢谢