小编tom*_*son的帖子

如何在样式组件中使用条件呈现,使用React中的样式组件将我的按钮类设置为活动状态？

在CSS中我会这样做:

<button className={this.state.active && 'active'} onClick={ () => this.setState({active: !this.state.active}) }>Click me</button>

在样式组件中如果我尝试在类名中使用'&&'它不喜欢它.

import React from 'react'
import styled from 'styled-components'

const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
      active: false
    }  
    this.handleButton = this.handleButton.bind(this)
}

  handleButton() {
    this.setState({ active: true })
  }

  render() {
     return(
       <div>
         <Tab onClick={this.handleButton}></Tab>
       </div>
     )
  }}

我试图通过将其作为孩子的目标来改变元素的nth-child(2)背景颜色,但我似乎无法让它工作,我尝试了不同元素的多种变化,似乎没有任何工作ColorBoxImgGrid

如果我不尝试定位nth-child元素,这将改变背景颜色

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  ${ColorBox} {
    background: #ff00ff;
  }
`

我怎样才能针对nth-child(2)中的 ColorBox元素？

import React from 'react'
import styled from 'styled-components'
// import Img from '../../atoms/Img'
import { array, bool } from 'prop-types'

const Wrap = styled.div`
  padding: 20px 0;
`

const BoxWrap = styled.div`
  position: relative;
  border: 1px solid #000;
  height: auto;
  padding: 20px;
`

const Title = styled.div`
  position: absolute;
  display: flex; …

我有两个按钮,当点击时应该过滤novelty或offer,我能够使它,以便当点击新奇时它会过滤,但我无法做到这样,如果两者都是点击它将过滤两者novelty和offer

我怎样才能做到这一点,当点击新奇和优惠时,它会被这两者过滤掉？

https://www.webpackbin.com/bins/-KpVGNEN7ZuKAFODxuER

import React from 'react'

export default class extends React.Component {
  constructor() {
    super()

    this.state = {
      products: [
        { id: 1, novelty: true, offer: false, name: 'test1' },
        { id: 2, novelty: true, offer: true, name: 'test2' },
        { id: 3, novelty: false, offer: true, name: 'test3' } 
        ],
      display: 'all',
      filters: [
        {novelty:'true'},
        {offer: 'true'}
      ]
    }
  }

  setCategory (category) {
    this.setState({
      display: category 
    });
  }

 render() {
   return( …

我尝试使用 onChange 处理程序将asYouType函数添加libphonenumber-js到我的 svelte 输入中，因为我不确定如何通过 2 路绑定来完成此操作。

我已经设法实现了这一点，但它只会在 onBlur 上格式化数字，而不是在用户键入输入时按照预期的行为，如此处libphonenumber-js所示

如何更改我的输入，使其在用户输入时格式化？

<script>
  import { AsYouType } from "libphonenumber-js";

  export let value = "";
  export let label = "";

  let isFocused = false;
  let isTooltipVisible = false;

  const onBlur = () => {
    isFocused = false;
    isTooltipVisible = false;
  };

  const handleChange = val => {
    if (localeKey === "dfc.removal_form.phone") {
      const asYouType = new AsYouType("US");
      value = new AsYouType("US").input(val);
    }
  };
</script>

<div class="input-container input__row …

我试图用另一个项目替换我的数组中的单个项目,我有一个数字位置的占位符,当我点击添加第一个项目应该进入第一个位置,第二个项目进入第二个位置所以上.

目前,它会在点击时在所有位置添加项目,这不是我想要的行为.

如果我删除数字位置占位符,我可以让它们进入正确位置的数组,但我无法让它与占位符一起使用.

单击时如何获取产品项目替换阵列中的数字位置？

https://codesandbox.io/s/6z48qx8vmz

Hello.js

import React from 'react';
import update from 'immutability-helper'
import styled from 'styled-components'
import Product from './Product'

const NumberWrap = styled.div`
  display: flex;
  flex-wrap:wrap
  border: 1px solid #ccc;
  flex-direction: row;
`

const Numbers = styled.div`
  display:flex;
  background: #fafafa;
  color: #808080;
  font-size: 32px;
  flex: 0 0 20%;
  min-height: 200px;
  justify-content: center;
  align-items:center;
  border-right: 1px solid #ccc;
`

const CardWrap = styled.div`
  display:flex;
  flex-wrap: wrap;
  flex-direction: row;
  margin-top: 20px;
`

export default class Hello extends React.Component { …

我是laravel的新手,我正在努力让我的网址格式正确.

格式为

Route::get('blog/{category}', function($category = null)
{
    // get all the blog stuff from database
    // if a category was passed, use that
    // if no category, get all posts
    if ($category)
        $posts = Post::where('category', '=', $category)->get();
    else
        $posts = Post::all();

    // show the view with blog posts (app/views/blog.blade.php)
    return View::make('blog.index')
        ->with('posts', $posts);
});

这些是我正在使用的文件,有没有办法将路由放入BlogController

Route.php

class BlogController extends BaseController {


    public function index()
    {
        // get the posts from the database by asking the Active Record for "all"
        $posts …

我正在尝试检查我的数组中data是否存在某个项目,如果确实存在,则阻止将其添加到数组中.

handleCheck如果一个项已经存在于数组中,该函数将返回true但我不知道如何使用它来阻止该项添加到数组中.

我试图在handlePush函数中 使用它,this.handleCheck(item) == false ?它应该检查它是否为假,如果是,那么推,如果它返回true它应该说它存在但是此时这不起作用,因为它将推送到数组,即使该项存在它永远不会console.log'存在'

如何更改handlePush函数以使用handleCheck并防止再次添加已存在于数组中的项？

https://www.webpackbin.com/bins/-KpnhkEKCpjXU0XlNlVm

import React from 'react'
import styled from 'styled-components'
import update from 'immutability-helper'

const Wrap = styled.div`
  height: auto;
  background: papayawhip;
  width: 200px;
  margin-bottom:10px;
`

export default class Hello extends React.Component {
  constructor() {
    super()
    this.state = {
    data: []
    }

    this.handlePush = this.handlePush.bind(this)
    this.handleRemove = this.handleRemove.bind(this)
    this.handleCheck = this.handleCheck.bind(this)
  }

  handlePush(item) {

    this.handleCheck(item) == false ?
    this.setState({
    data: update(this.state.data, {
      $push: [
        item
      ] …

我正在将一个 svg 作为组件导入 react，但它Style在 css 类周围有标签，因此当我尝试导入它时会引发错误，如果我删除style标签中的 css，它会加载 svg 但显然缺少额外的样式

如果可能，我想避免将所有样式移动到单独的 .css 文件中，如何将 svg 作为组件导入 React 中但保留所有样式？

import React from 'react'

export const StoffFarbe = () =>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 40 40">
   <style type="text/css">
    .st0{fill:none;stroke:#1D1D1B;stroke-width:3.2003;stroke-linejoin:round;stroke-miterlimit:10;}
    .st1{fill:none;stroke:#1D1D1B;stroke-width:1.6001;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<g>
    <path className="st0" d="M6.3,33c-1.4-1.4-2.4-3.8,0.2-6.4s7.4-4.8,7.4-4.8s0.8-3.8,0.2-6.6c1.6-1.6,10.8-10.8,10.8-10.8l10.2,10.2
        c0,0-9.2,9.2-10.8,10.8c-3.2-1.4-6.2,0-6.2,0s-2.8,5-5,7.4C10.5,35,7.7,34.5,6.3,33z"/>
</g>
<line className="st1" x1="15.7" y1="13.8" x2="25.5" y2="23.6"/>
<circle className="st1" cx="9.3" cy="29.8" r="0.4"/>
<path className="st1" d="M20.1,9.4c0,0-0.4,1.4,1.6,2.2s3.4-1.2,4,0.6s-1.6,4.2,1.4,5.2c3,0.8,3.8-0.8,4.2,0.4"/>
</svg>

我正在尝试使用 redux 从数组中添加/删除项目，这些项目将添加到数组中，但是当我尝试删除一个项目时，它看起来像是在改变数组并添加项目而不是删除

尝试添加/删除项目后，我的状态看起来与此类似

[item1, item2, [item1, item2]]

如何从数组中删除项目？

状态

state.filtered.cities: []

过滤器.js

import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import * as actions from './actions'

class Filter extends React.Component {

  handlecity = (city) => {
    this.props.addCity(city)
  }

  handleRemoveCity = (city) => {
    this.props.removeCity(city)
  }



  render() {

    const options = [
   'item1','item2'
    ]

    return(
      <Wrap>
        {options.map((option,index) =>
          <Cell>
            <OptionWrap key={index} onClick={()=> this.handlecity(option)}>
              {option}
            </OptionWrap>
            <OptionWrap key={index} onClick={()=> this.handleRemoveCity(option)}>
              remove {option}
            </OptionWrap>
            {console.log(this.props.city && …

我正在使用最新版本的React Router v4，并且尝试在PageWrapdiv中渲染页面组件Home / About，但是我遇到的问题是，如果将Routes添加到标题中，它将切换路由但它们会将Home / About组件显示为标题的一部分，而不显示我想要的位置。

如果我将路由放入，PageWrap则路由器不起作用，但不会在控制台上引发任何错误。

如何在PageBodydiv中显示和切换组件？

Webpack链接

app.js

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import styled from 'styled-components'
import Header from './Header'

import Home from './pages/Home'
import About from './pages/About'


const Wrapper = styled.div`
  display:flex;
  min-height:100vh;
 flex:1;
 background:#eee;
`
const PageWrap = styled.div`
 margin:0 auto;
 min-width:1400px;
 background: #000;
`

class App extends React.Component { // eslint-disable-line react/prefer-
stateless-function
  render() {
    return (
  <div> …