Question

在渲染列表元素之后的一段时间后，我将不再添加样式。

我已经尝试过类似的方法，但是它根本不起作用

   const errorList = Object.values(errors).map((el,i)=>{
        console.log(el)

        if(el === "required"){
            return <li  key={i} onClick={this.handleScroll.bind(this, i)}
                        style={{visibility: setTimeout(()=>{
                                return "hidden"
                            }, 500)}}

                        className="text-black-14px">This field is required</li>
        } else if(el === "non-error"){

            return <li  key={i} onClick={this.handleScroll.bind(this, i)}  style={margin} className="text-black-14px green">This field is OK</li>
        }
          else {
            return <li  key={i}  onClick={this.handleScroll.bind(this, i)} style={margin} className="text-black-14px">{el}</li>
        }
    })

是否可以通过setTimeOut添加样式？

Answer 1

您可以例如有一个单独的状态变量showErrors，您可以在设置错误时将其设置为true，然后使用setTimeout将showErrors设置回false时间。

示例

class App extends React.Component {
  state = {
    errors: ["required", "non-error", "foo"],
    showErrors: true
  };

  componentDidMount() {
    setTimeout(() => {
      this.setState({ showErrors: false });
    }, 2000);
  }

  render() {
    return (
      <div>
        {Object.values(this.state.errors).map((el, i) => {
          if (el === "required") {
            return (
              <li
                key={i}
                style={{
                  visibility: this.state.showErrors ? "visible" : "hidden"
                }}
                className="text-black-14px"
              >
                This field is required
              </li>
            );
          } else if (el === "non-error") {
            return (
              <li key={i} className="text-black-14px green">
                This field is OK
              </li>
            );
          } else {
            return (
              <li key={i} className="text-black-14px">
                {el}
              </li>
            );
          }
        })}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

您将必须包含您所在状态的信息，因为超时结束后，您的节点将不得不重新呈现自身。 setTimeout应该在您的componentDidMount生命周期方法中，以便在安装组件后触发：

componentDidMount(){
    setTimeout(() => {
        this.setState({ isHidden: true })
    }, 500)
}

将isHidden的原始状态设置为false：

state = {
    isHidden: false
}

如果需要该字段，则style变量将从状态中删除该值：

style={el === "required" ? { visibility: this.state.isHidden } : margin}

此外，您可以使用内联条件将您提供的代码简化为以下内容：

const errorList = Object.values(errors).map((el, i) => {
    console.log(el)
    return <li 
        key={i} 
        onClick={this.handleScroll.bind(this, i)} 
        style={el === "required" ? { visibility: this.state.isHidden } : margin} 
        className={el === 'non-error' ? "text-black-14px green" : "text-black-14px"}>
        {{
            'required': 'This field is required',
            'non-error': 'This field is OK'
        }[el] || el}
    </li>
})

通过setTimeout将样式添加到动态添加的列表元素REACT

2 个答案: