小编Liz*_*ody的帖子

我有这个呈现应用程序路由的组件：https://jsbin.com/bahaxudijo/edit?js，我正在尝试模拟 BrowserRouter 和 Route 来进行测试，这是我的测试：

import React from 'react';
import renderer from 'react-test-renderer';

import Router from '../../../components/Router/Component';

jest.mock('react-router-dom', () => ({
  BrowserRouter: ({ children }) => <div>{children}</div>,
  Route: ({ children }) => <div>{children}</div>,
}));

jest.mock('../../../components/Nav/index', () => '<MockedNav />');
jest.mock('../../../components/ScheduleManager/index', () => '<MockedScheduleManager />');

const props = {
  token: '',
  loginStaff: jest.fn(),
};

describe('<Router />', () => {
  describe('When is passed a token', () => {
    it('renders the correct route', () => {
      const component = renderer.create(<Router {...props} …

我有这个功能,当我点击<li>标签时,我想调用两个函数,onClick={handleProjectSelection(project)}一个来自父组件的props的处理函数,以及这个函数onClick={() => this.setState({ showingProjectSelector: false })}

  renderDropdown () {
    const { displayDropdown, projects, handleProjectSelection } = this.props
    if (this.state.showingProjectSelector && displayDropdown) {
      const projectsList = projects.map((project) => (
        <li className='u-cursor--pointer u-font-size--12px'
          key={project.get('id')}
          onClick={handleProjectSelection(project)} >
          <i className='fa fa-square u-font-size--10px' style={{color: project.get('color')}}></i>
          {project.get('name')}
        </li>
      ))

我怎么称这两个功能？这是父组件的处理函数

  handleProjectSelection = (project) => () => {
    this.setState({
      projectToAdd: project.get('id'),
      projectToAddColor: project.get('color'),
      projectToAddName: project.get('name') === 'default' ? 'No' : project.get('name').substring(0, 2)
    })
  }

我创建了该组件NotFound，当我转到一个不存在的页面时，它可以正常工作。但是它出现在我的所有页面中的是同一页面，而不仅仅是不存在的页面。这是组件：

import React from 'react'

const NotFound = () =>
  <div>
    <h3>404 page not found</h3>
    <p>We are sorry but the page you are looking for does not exist.</p>
  </div>

export default NotFound

这就是我在主页中使用它的方式：

class MainSite extends Component {
  render () {
    return (
      <div>
        {/* Render nav */}
        <Route path='/dashboard' component={Nav} />
        <Route path='/retrospectives' component={Nav} />
        <Route path='/users' component={Nav} />
        <Route path='/projects' component={Nav} />

        {/* Dashboard page */}
        <ProtectedRoute exact path='/dashboard' component={DashboardPage} />

        {/* Retrospectives page */}
        <ProtectedRoute …

我正在学习长生不老药,我想知道,如果nil是一样的null在JavaScript中,如果没有,是什么意思？

我正在做一个教程,它说"在本指南中,我们将学习如何构建一个完整的Elixir应用程序,具有自己的监督树,配置,测试等等".

简单来说,Elixir的监督树是什么？

谢谢!

我有这个组件形式的react-tooltip，我在其中传递了一些道具并创建了工具提示。我希望工具提示的位置默认为“顶部”，但是当我将道具传递到不同的位置时，可以更改它。

class Tooltip extends PureComponent {\n  render() {\n    const { text, element, type, place, className } = this.props;\n    return (\n      <div data-tip={text} className="m0 p0">\n        {element}\n        <ReactTooltip\n          type={type}\n          place={place}\n          effect="solid"\n          className={className}\n          html\n        />\n      </div>\n    );\n  }\n}\n\nTooltip.defaultProps = {\n  type: \'info\',\n  place: \'top\',\n  className: \'tooltip-top\',\n};\n\nTooltip.propTypes = {\n  text: PropTypes.string.isRequired,\n  element: PropTypes.element.isRequired,\n  type: PropTypes.string,\n  place: PropTypes.sring,\n  className: PropTypes.sring,\n};\n\nexport default Tooltip;\n

然后我有另一个组件，我将一些道具传递给工具提示组件，我只想将这个唯一的组件放置在底部。

    <Tooltip\n      type="warning"\n      place="bottom"\n      className="tooltip-bottom"\n      text={\n        \'Ingrese los datos de la informaci\xc3\xb3n financiera hist\xc3\xb3rica de su compa\xc3\xb1\xc3\xada en la plantilla\'\n …

我有一个简单的形式，可以接收名字和姓氏，并且需要删除字符串开头和结尾的空格。我可以使用.trim()方法来执行此操作，但是因为它是一种形式，所以它不允许我写一个包含两个单词的名称，例如Ana Maria，因为它不允许我在单词末尾按空格键。如何除去字符串两边的空格，但仍然让我按空格并写多个单词？

这是组件：

export default function ScheduleInput(
  { label, required, onChange, value, ...extraProps },
) {
  return (
    <div className="item_container">
      {label}:
      {required &&
        <span style={{ color: 'red' }}> *</span>
      }
      <br />
      <input
        type="text"
        onChange={onChange}
        value={value.trim()}
        {...extraProps}
      />
    </div>
  );
}

我有这个li标签

<li className='u-cursor--pointer u-padding-vertical-small c-start-retro-line'
  key={project.get('id')}
  onClick={() => this.handleProjectSelection(project.get('id'))} >
  <i className='fa fa-square' style={{color: project.get('color')}}></i>
  {project.get('name') === 'default' ? 'No Project' : project.get('name')}
</li>

我需要在<i></i>标签和内部的内容之间添加一个空格{} {project.get('name') === 'default' ? 'No Project' : project.get('name')}

我怎样才能做到这一点？我试过<span></span>但它不起作用(我需要一个额外的空间,而不是一个新线)

我有这个对象，具有我想要的模态样式：

const customStyles = {
  content: {
    top: '35%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    width: '60%',
    transform: 'translate(-40%, -10%)',
  },
};

然后我将这些样式传递给模态，如下所示：

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              style={customStyles}
            >

它工作正常，但我想传递一个类，而不是在组件内创建 customStyle 对象。

我尝试这样的事情，首先创建模态类：

.modal {
  top: '35%';
  left: '50%';
  right: 'auto';
  bottom: 'auto';
  marginRight: '-50%';
  width: '60%';
  transform: 'translate(-40%, -10%)';
}

进而：

            <Modal
              isOpen={this.state.modalIsOpen}
              onRequestClose={this.closeModal}
              className="modal"
            >

但它没有用。我究竟做错了什么？

我想要一个type="file"只接受 pdf 和 excel的输入

我做了这个 <input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

它接受 .pdf 和 .xls 文件，但不接受 .xlsx，我怎样才能让它也接受 xlsx 文件？