小编Chr*_*ris的帖子

我有一个字符串,txt当点击按钮时需要在文件中下载.如何使用React实现？

我在React中有以下组件:

const Button = styled.div`
        width: 30px;
        height: 30px;
        position: absolute;
        right: 2em;
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
        margin: 0;

        &::before,
        &::after {
          content: "";
          position: absolute;
          background-color: #3d3935;
          transition: transform 0.25s ease-out;
        }

        &::before {
          top: 0;
          left: 50%;
          width: 4px;
          height: 100%;
          margin-left: -2px;
        }

        &::after {
          top: 50%;
          left: 0;
          width: 100%;
          height: 4px;
          margin-top: -2px;
        }
`;

它只是呈现具有库样式组件的组件.它基本上显示了一个+标志.

但是,我想分别轮换每一行,使用:

    &::before {
      transform: rotate(${this.state.expanded ? '0' : '45'}deg);
    }
    &::after {
      transform: …

我有一个setInterval()在React组件中使用的计时器,我不确定最佳实践是什么,以便在使用时启动和停止此间隔state.我遇到了一些异步问题.

假设我的React组件中有一组链接可以呈现并执行回调:

let links = [10, 50, 100, 500, 1000].map((num) => {
  return(
    <Link key={num} onClick={(e) => this.switchNums(num)} to={`/somePath/${num}`}>{num}</Link>
  )
})

这是switchNums()函数,我希望它重置现有的计时器:

switchNums(num){
  this.stopTimer()
  this.reset(num)
}

这是startTimer(),stopTimer()和reset():

startTimer(){
  if(!this.state.timerId){      
    let timerId = setInterval(()=>{
      let timer = this.state.timer + 1
      this.setState({
        timer: timer,
        timerId: timerId
      })
    }, 1000)
  }
}

stopTimer(){
  clearInterval(this.state.timerId)     
  this.setState({timerId:null})
}

reset(size){
  this.setState({
    gameOver: false,
    counter: 0,
    correct: 0,
    numbers: this.getRandomNumbers(size),
    timer: 0
  }, this.startTimer())
} …

我希望在悬停时淡入边框.我有以下但它开始时没有任何东西然后去1px灰线(灰色是默认颜色),然后最终变为2px红线.

我出了什么问题？

a{ 
    border-bottom: none;
    transition: border-bottom 1s;
}
a:hover{
    border-bottom: 2px solid red;
}

<a href='#'>hover here</a>

我有以下代码:

export class Highlights extends React.Component {
    render() {
        return (
            <div>
                {JSON.stringify(this.props.highlights_data.data)}
            </div>
        )
    }
}

这打印出以下内容:

{ "活性":{ "标签": "活跃", "值": "12"}, "自动":{ "标记": "自动", "值": "8"}, "等待":{ "标签": "等待", "值": "1"}, "手动":{ "标签": "手动", "值": "3"}}

我怎样才能遍历highlights_data.data道具调用另一个组件传承label和value？

我正在尝试创建一个更高阶的组件，但不断收到这个 eslint 警告。

组件定义缺少显示名称

我尝试添加如下所示的显示名称，但它仍然抱怨。

import React from 'react';

const HOC = props => (WC) => {
  WC.displayName = 'test'
  return (
    <WC />
  );
}

export default HOC;

我可以title在锚标记内更改属性的设计,即使默认标记与更改的标记一起出现.

我想知道是否可以删除默认title工具提示,如下所示？

到目前为止,这是我的代码:

<a title="Edit"><img alt="" src="dist/img/edit.png" ></a>

a:hover {
    color: red;
    position: relative;
}

a[title]:hover:after {
    content: attr(title);
    padding: 2px 4px;
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear, left top, left bottom,
                      color-stop(0, #eeeeee), color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, …

我的MySql服务器中有2个不同的数据库.

First table DB1.contacts:

id | name | code
1  | foo  | 157
2  | foo  | 95
3  | foo  | 210

Second table DB2.paperworks:

id | name | contact_id
1  | foo  | 0

我想更新DB2.paperworks,设置DB1.contacts.contacts表的DB2.paperworks.contact_id = max(DB1.contacts.code),其中DB2.paperworks.name = DB1.contacts.name

我希望的输出应该是:

查询DB2.paperworks之后的第二个表:

id | name | contact_id
1  | foo  | 210

这是我的查询:

UPDATE DB2.paperworks
JOIN DB1.contacts
ON DB2.paperworks.name = DB1.contacts.name
SET DB2.paperworks.contact_id = DB1.contacts.code

我不明白如何写che"MAX(代码)"条件.你能帮我吗？

我最近发表了一个问题的答案,当我key从数组返回时发现了一个问题.

我已经知道,兄弟组件中的键必须是唯一的.这在官方的React文档中说明,这里:

数组中使用的键在其兄弟姐妹中应该是唯一的.但是,它们不需要是全球唯一的.当我们生成两个不同的数组时,我们可以使用相同的键.

但是,与上面的粗体文本相比,似乎React对于相同的数组具有相同的键是很好的.为什么下面的代码片段工作且密钥不会发生冲突？

class MyApp extends React.Component {

  renderArray = () => {
    return [
      <p key={0}>Foo</p>,
      <p key={1}>Bar</p>,
      <p key={2}>Baz</p>
    ];
  }

  render() {
    return (
      <div>
        {this.renderArray()}
        {this.renderArray()}
        {this.renderArray()}
      </div>
    );
  }
}

ReactDOM.render(<MyApp />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

显然,这不起作用:

class MyApp extends React.Component {

  render() {
    return (
      <div>
        <p key={0}>Foo</p>
        <p key={1}>Bar</p>
        <p key={2}>Baz</p>
        <p key={0}>Foo</p> …

我有一个网站,其中包含以下内容react-router和react-router-relay设置:

main.jsx:

<Router history={browserHistory} render={applyRouterMiddleware(useRelay)}>
  <Route path="/:classroom_id" component={mainView} queries={ClassroomQueries}>
    <IndexRoute component={Start} queries={ClassroomQueries} />
    <Route path="tasks" component={TaskRoot} queries={ClassroomQueries}>
      <IndexRoute component={TaskList} queries={ClassroomQueries} />
      <Route path="task/:task_id" component={TaskView} queries={ClassroomTaskQueries} />
      <Route path="task/:task_id/edit" component={TaskEdit} queries={ClassroomTaskQueries} />
    </Route>
  </Route>
</Router>

该网站是一个虚拟教室,教师可以在其中为学生创建任务.这些任务也可以编辑.

当用户编辑任务TaskEdit并点击保存时,将应用更改并将用户重定向到TaskList.现在,我希望在编辑任务后为用户提供" 您的更改已保存! "消息.

我已经为此目的创建了一个引导警报组件(<Alert>).

为了便于说明,假设我有以下mainView组件(检查上面的路由器):

mainView.js:

render() {
  <div>
    <Menu />
    <Row>
      <Col md={3}>
        <Sidebar />
      </Col>
      <Col md={9}>
        {this.props.children}  <-- Start, TaskRoot, etc go here
      </Col>
    </Row>
    <Alert someProps={...} /> …