Question

我是新手，在html / css / javascript上做出反应并仍然是noobish。我想让我的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

将键和值包装在引号中。

<div style={{"display": "inline"}}>

Answer 2

我不知道为什么这段代码对你不起作用。您也可以使用对象实现它。以下示例和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>
);

我希望它会对你有所帮助。

由于

Answer 3

我在一个普通的index.css中使用flexbox。

＆＃13;

"()"

＆＃13;

.FlexBox {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
}

.FlexBoxJustAround {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
}

.FlexBoxJustBetween {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}

.FlexBoxWrap {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
}

.FlexJustify {
	-webkit-box-pack: justify;
	justify-content: space-between;
}

.FlexBoxStretch {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	align-content: stretch;
}

.FlexItem {
	flex-grow: 1;
}

.HighZ {z-index: 200;}

＆＃13;

Answer 4

您可以改为创建变量，看看这是否有助于您的代码：

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

无法在React

4 个答案: