小编Per*_*tyy的帖子

我有一个容器元素，它包含一些其他元素，但根据屏幕尺寸，它们的部分在不同部分莫名其妙地被切断。当 HTML 页面的宽度调整时（通过单击并拖动它），您可以观察我的代码沙箱链接上的行为。如何确保只呈现主容器边框，而子元素没有任何影响？

https://codesandbox.io/s/focused-tree-ms4f2

import React from "react";
import styled from "styled-components";

const StyledTextBox = styled.div`
  height: 15vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  border: 1px solid black;
  background-color: #fff;
  > * {
    box-sizing: border-box;
  }
`;

const InputBox = styled.span`
  height: 35%;
  width: 100%;
  display: flex;
  border: none;
  outline: none;
`;



const UserInput = styled.input`
  height: 100%;
  width: 90%;
  border: none;
  outline: none;
`;

const SolutionBox = styled.div`
  height: 35%;
  width: 100%;
  border: none;
  outline: none; …

我正在使用 amaterial-ui button并尝试通过样式组件覆盖边界半径（即，使其为 0）。但是，它不起作用。

代码：

import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";

const StyledButton = styled(Button)`
  background-color: #d29d12;
  border-radius: 0;
`;

export default function App() {
  return <StyledButton>Hello</StyledButton>;
}

当其中一个道具等于 true 时，我试图在我的组件之一上运行动画。但是，我收到“flash 不是函数”的错误。

https://codesandbox.io/s/wizardly-moser-tet99?file=/src/App.js:0-606

import React, { useState } from "react";
import styled, {keyframes} from "styled-components";

const flash = keyframes`
  from {
      opacity: 0;
      }

      to {
      opacity: 1;
      }
`;

const StyledTile = styled.div`
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: ${props => props.animate ? flash `0.3s linear 3` : `null`};
`

export default function App() {

  const [doAnimate, setDoAnimate] = useState(false);
  return (
    <div className="App">
      <StyledTile animate = {doAnimate}/>
      <button onClick = {() => setDoAnimate(true)}/>
    </div>
  ); …

我是递归的新手,目前正在编写一个Merge Sort算法,它比较两个列表的第一个元素并确定哪一个更小,然后将较小的一个添加到新列表中.

我正在尝试在每次比较后更新三个列表并让函数再次使用更新的列表调用自己,但是我在Pycharm中得到了未解决的引用问题而不确定我做错了什么.到目前为止,这是我的代码,我想要的输出是:

new_list = [4,8,15,16,23,42,50,75,108]

def merge_Sort(list1, list2, new_list):
    list1 = [8, 15, 16, 50, 75]
    list2 = [4, 23, 42, 108]
    new_list = []
    for i in range(len(list1)):
            if list1[0] < list2[0]:
                new_list = new_list.append(list1[0])
                list1 = list1.remove(list1[0])
                break


            elif list1[0] > list2[0]:
                new_list = new_list.append(list2[0])
                list2 = list2.remove(list2[0])
                break

    merge_Sort(list1, list2, new_list)

merge_Sort(list1, list2, new_list)

我正在尝试使用 border-radius 属性为我的容器 div 之一提供圆角边缘。但是，当我这样做时，在容器 div 中呈现的 textareas 会阻塞 div 的左下角和右下角。我如何调整我的 css 以便不再发生这种情况，并且文本区域按我想要的方式工作？

应用程序.js

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends React.Component {
  render() {
    return (
      <div className="screenDiv">
        <div className="topContainer">
          <div className="textContainer">
            <div className="textBoxes">
              <div className="leftTextBox">
                <textarea className="myText" />
              </div>
              <div className="rightTextBox">
                <textarea className="myText" />
              </div>
            </div>

            <div className="languageDisplay">
              <div className="inputLanguage">
                <p>English</p>
              </div>
              <div className="outputLanguage">
                <p>Spanish</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

应用程序.css

.screenDiv { …

我正在尝试实现一个接受5个输入的表单，并将每个传递的表单设置为表中的单元格。如果仅填写五个元素中的四个，则此方法有效，但是如果填写所有选项，它将崩溃。我只想在用户填写了表单的所有五个元素后才向表中添加一行。

function aFunction() {
  var table = document.getElementById("myTable"),
    row = table.insertRow(-1),
    cell1 = row.insertCell(0),
    cell2 = row.insertCell(1),
    cell3 = row.insertCell(2),
    cell4 = row.insertCell(3),
    cell5 = row.insertCell(4),
    elements = document.forms['myForm'].elements;

  cell1.innerHTML = elements['pickup'].value;
  cell2.innerHTML = elements['delivery'].value;
  cell3.innerHTML = elements['price'].value;
  cell4.innerHTML = elements['pickup-distance'].value;
  cell5.innerHTML = elements['delivery-distance'].value;

}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

body {
  background-color: powderblue;
}

h1 {
  color: …