Question

我看过关于ReactJS-native的几篇文章。我相信我的与众不同，因为我使用的是ReactJS，因此不是Views。

我想显示一个公式，将鼠标悬停在某些文本上会显示一个div /消息。我希望我的div显示为一行，因此内容显示为：

P(1 + R/N)nt

现在它们显示为一列。

P
(1 +
R/
N)
n
t

这是我的代码：

<div key="4">
                <b>How did we get these numbers?</b>
                <div className="equation">
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            P
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            (1 +
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            R/
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            className="eq"
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                            N)
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>n</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                    <div>
                        <div
                            onMouseEnter={this.handleMouseHover}
                            onMouseLeave={this.handleMouseHover}
                        >
                          <sup>t</sup>
                        </div>
                        {this.state.isHovering && <div>example hover text</div>}
                    </div>
                </div>
            </div>

我的emotion css样式：

const equation = css`
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
`;

这是一个沙箱：https://codesandbox.io/s/emotion-pl9m3

Answer 1

您为“ equation” css类设置样式的组件语法错误。如果检查页面，您会注意到类方程式的css没有应用到父div。正确的语法是这样的：

<Equation>
  <div></div>
  <div></div>
  ...
</Equation>

const Equation = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
`;

工作沙箱： https://codesandbox.io/embed/emotion-xupvk

ReactJS：伸缩方向行和证明内容：伸缩启动不起作用

1 个答案: