小编Nao*_*omi的帖子

第二行div与CSS和React并排

如图所示,我有两个组件,我想要并排排列:

我使用的反应,并与组件Negotiation,frontend以及food来自其它组件传递的元素.

我如何设置这个样式,以便每个元素(Negotiation,Frontend和food)彼此分开,但仍然在同一列中,旁边有新闻排列？

我的JavaScript:

class Course extends React.Component {
  render() {
    return (
      <div>
        <div className="coursecontent">
          <h3>{this.props.coursename}</h3>
          <h4> {this.props.status} {this.props.progress}</h4>
        </div>
        <button className="coursecontent">Start exercise</button>
      </div>
    );
  }
}

class Welcomebox extends React.Component {
  render() {
    return <h1>Welcome Naomi</h1>;
  }
}

ReactDOM.render(<Welcomebox />, document.getElementById('welcomebox'));

class Coursebox extends React.Component {
  render() {
    return (
      <div className="box-field">
        <Course coursename="Negotiation" progress= "20%" status="Progress"/>
        <Course coursename="Frontend" progress="56%" status="Progress"/>
        <Course coursename="Food" status="Progress" progress="43%"/>
      </div> …

Run Code Online (Sandbox Code Playgroud)

css reactjs

Nao*_*omi

2019 01-25

11
推荐指数

1
解决办法

2万
查看次数

React 中的 addEventListener 为 null

我正在使用 React 创建搜索功能。我以前用过这种方法，但没有用过 React，但它确实有效。现在，它在控制台中出现错误，显示“Uncaught TypeError: Cannot read property 'addEventListener' of null”。这和它的反应有什么关系吗？我该如何解决？

<body>
<div id="searching"></div>
<script type="text/babel">
    class SearchBox extends React.Component { render(){ return(
    <form>
        <input type="text" className="searchbox" />
    </form>) } } ReactDOM.render(
    <SearchBox />, document.getElementById("searching"));
</script>

Run Code Online (Sandbox Code Playgroud)

const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
const repositories = [];

fetch(endpoint)
.then(blob => blob.json())
.then(data => repositories.push(...data));

function findMatches(wordToMatch, repositories) {
return repositories.filter(place => {

    const regex = new RegExp(wordToMatch, "gi");
    return place.city.match(regex) || place.state.match(regex);
    });
};

function displayMatches() {
const matchArray = findMatches(this.value, repositories); …

Run Code Online (Sandbox Code Playgroud)

javascript reactjs

Nao*_*omi

lucky-day

4
推荐指数

1
解决办法

1万
查看次数

将数字四舍五入到小数点后两位

我试图使用Math.round总计仅显示两位小数，但它无法按预期工作。我究竟做错了什么？

$(document).ready(function() {
    var totalPrice = 0;

    $('.food').click(function() {
        var $frm = $(this).parent();
        var toAdd = $frm.children(".productInput").val();
        var addPrice = parseFloat($frm.children(".priceInput").val());
        var addAmount = parseFloat($frm.children(".amountInput").val());

        if ($('.priceInput').val() == '') {
            alert('Price can not be left blank');
        };
        if ($('.amountInput').val() == '') {
            alert('Amount can not be left blank');
        } else {

            var div = $("<div>");
            div.append("<p class='amount'>" + addAmount + "</p>", "<p class='product'> " + toAdd + " </p>", "<p class='price'>" + addPrice + "</p>", "<p …

Run Code Online (Sandbox Code Playgroud)

javascript jquery

Nao*_*omi

2022 08-27

3
推荐指数

1
解决办法

1万
查看次数

nth-child(odd) 和 nth-child(even) 具有不同的对齐项

我正在使用 flexbox 并且我试图让 nth-child(odd) 来align-items:flex-start 和 nth-child(even)align-items:flex-end 但所有的孩子都会对齐为第一个孩子.我怎样才能做到这一点？有没有办法使用 Flexbox 而不是浮动来做到这一点。我的目标是让它看起来有点类似于 Facebook Messenger。

.received-message {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
}

.received-message:nth-child(odd) {
  align-items: flex-start;
}

.received-message:nth-child(even) {
  align-items: flex-end;
}

.message-pop-up {
  width: 80%;
  position: relative;
  margin: 0 20px 20px 20px;
}

.message-text {
  border: 2px solid #9c9696;
  margin: 0 50px 0 50px;
  background-color: white;
}

.message-pop-up:nth-child(odd) img {
  border-radius: 50px;
  float: right;
  margin: 10px 10px 0 0;
}

.message-pop-up:nth-child(even) img {
  border-radius: 50px;
  margin-right: 10px;
  float: left;
  margin: …

Run Code Online (Sandbox Code Playgroud)

html css flexbox

Nao*_*omi

2018 01-30

3
推荐指数

1
解决办法

1605
查看次数