标签: jsx

似乎Emmet也应该使用.jsx文件,但我不能让它在atom中工作.我的div没有扩展,当我按Tab键时没有任何反应.我尝试重新启动Atom,禁用所有其他用户包,它与html文档完美配合.Emmet应该开箱即用.jsx还是需要配置？

我有一个我正在使用Enzyme进行测试的组件,如下所示:

<RichTextEditor name="name" onChange={[Function]} value="<p>what</p>" focus={false}>
  <div className="rich-text-editor">
  <div className="btn-group" role="group">
  <StyleButton active={false} icon="fa-list-ul" label="UL" onToggle={[Function]} style="unordered-list-item">
  // ...

我试图检测StyleButton组件的存在,如下所示:

mount(<RichTextEditor />).find('StyleButton[label="UL"]')

但是没有返回任何组件.我可以通过搜索字符串"StyleButton"来找到所有StyleButton,但是我找不到属性,包括仅通过使用属性选择器.

我粘贴的第一个代码块来自安装RichTextEditor的调试输出,所以StyleButton绝对存在.

有任何想法吗？

谢谢.

我有以下反应功能组件来帮助支持使用react-router的身份验证所需的路由.

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated() ? ( 
        <Component {...props}/>
    ) : (
        <Redirect to={{
            pathname: '/login', 
            state: {from: props.location }
        }}/>
    )
  )}/>
)

我需要将它从功能组件转换为类组件,以便我可以利用React.Component的componentDidMount方法.不幸的是,我无法弄清楚如何迁移它.如果我按原样使用它,我需要复制Component和... rest参数,但我不知道该怎么做.我想我可以用this.props.component获取Component参数,但我不确定如何拉...休息.我是JSX和ES6的新手,所以我们非常感谢任何帮助或指导.

嗨,谢谢你们在这里的出色工作.我正在使用react.js为我的项目构建我的组件,我觉得现在我的项目有点困难.我试图设置一个具有悬停功能的按钮,我不知道如何应用它来做出反应.

这是代码:

let button = {
    backgroundColor: colorPalette.white,
    border: "1px solid rgb(12,106,145)",
    color: colorPalette.brandCol1,
    textAlign: 'center',
    textDecoration: 'none',
    fontSize : 'inherit',
    fontWeight : 600,
    padding : "5px 8px 5px 8px"
}

我想像在css中一样添加悬停样式

button:hover {
style here.......
}

什么是正确的语法？

在React-Redux项目中,人们通常会为每个连接的组件创建多个操作和缩减器.但是,这会为简单的数据更新创建大量代码.

使用单个通用操作和缩减器来封装所有数据更改是一种很好的做法,以简化和加快应用程序开发.

使用此方法会有什么缺点或性能损失.因为我看不到重要的权衡,它使开发变得更容易,我们可以将它们全部放在一个文件中!这种架构的例子:

// Say we're in user.js, User page

// state
var initialState = {};

// generic action --> we only need to write ONE DISPATCHER
function setState(obj){
    Store.dispatch({ type: 'SET_USER', data: obj });
}

// generic reducer --> we only need to write ONE ACTION REDUCER
function userReducer = function(state = initialState, action){
    switch (action.type) {
        case 'SET_USER': return { ...state, ...action.data };
        default: return state;
    }
};

// define …

我想更改__next登录页面上id 的 div 。但是当我在 jsx 中添加样式时，当 dom 挂载到页面时，它似乎更改为另一个 ID 为#__next.jsx-2357705899, .main.jsx-2357705899 的div 。

__next挂载登录页面时如何更改div 的css ？

<style jsx>{`
  #__next,
  .main {
    height: 100%;
  }
`}</style>

在 React Native 中，您可以将一组组件封装在一个<View>（或类似的）组件中。您还可以将一组组件封装为<>和</>。这些是什么？它们只是转换为基本视图吗？这可能不是一个好的做法，但它不会发出警告，也不会崩溃。

在 WordPress 中创建块时，我需要添加带有链接的翻译。我在 JS 中这样做，但它没有提供预期的结果：

import { render } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export default function Final() {

    let d = <a href="https://example.com">bothered me.</a>;

    return (

        <p>  { __( 'The cold never {d} anyway.', 'text-domain' ) } </p>

    )
}

document.addEventListener( "DOMContentLoaded", function(event) {
    const appRoot = document.getElementById( 'root' );

    if ( appRoot ) {
        render(
            <Final/>,
            appRoot
        )
    }
});

在 PHP 中，我可以使用 sprintf 并使用 %1s 等占位符轻松做到这一点。

echo sprintf(
    __( 'The cold never %1s anyway', …

我曾多次尝试使用<Form>和<FormControl>组件.每次我使用我都会得到相同的错误:

"warning.js？8a56:45警告:React.createElement:type不应该是null,undefined,boolean或number.它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件).检查render方法的App."

"Uncaught Invariant Violation:元素类型无效:期望一个字符串(对于内置组件)或类/函数(对于复合组件)但得到:undefined.检查render方法App."

即使有这个基本的例子:

import React, {Component} from 'react';
import {FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button} from 'react-bootstrap';

export default class App extends Component {
  render() {
    return (
      <form>
        <FormGroup controlId="formControlsText">
          <ControlLabel>Text</ControlLabel>
          <FormControl type="text" placeholder="Enter text" />
        </FormGroup>

        <Button type="submit">
          Submit
        </Button>
      </form>
    );
  }
}

有任何想法吗？

假设我们使用的是来自React-Bootstrap的Row ...我们如何在不使用包装器或内部元素的情况下对其进行样式化:

<Row>
  <div className='some-style'>
   ...
</Row>

理想情况下我们可以这样做:

<Row className='some-style> 
  ...
</Row>

但这不起作用,我认为这是因为React-Bootstrap不知道className在Row组件中的位置(它应该只设置具有我想的行样式的div)