ReactJS：setTimeout() 在 return 内不工作？

Question

在 render()、return() 内部，我正在尝试设置超时但它不起作用。

我是不是做错了什么？

{setTimeout(() => {
          filtered.length && (
            <FilterListContainer
              containerHeight={this.state.filterContainerHeight}
            >
              <FilterListScroll>
                <FilterList ref={this.filterListRef}>
                  {filtered.map((k) => (
                    <SidebarFilter
                      key={k}
                      type={k}
                      filter={this.props.body_search_filter[k]}
                      handleChange={this.handleFilterChange}
                    />
                  ))}
                </FilterList>
              </FilterListScroll>
            </FilterListContainer>
          );
        }, 1)}

Answer 1

您说过您不希望该内容“稍后”出现。

为此，您需要一个状态成员说明是否显示内容，在呈现时使用它，并让 setTimeout 更改状态成员的值。

例如，这里有一个使用钩子的例子：

const { useState, useEffect } = React;

const Example = () => {
    const [showList, setShowList] = useState(false);
    
    useEffect(() => {
        const handle = setTimeout(() => {
            setShowList(true);
        }, 800); // Longer delay so you can see it
    }, []);
    
    return <div>
        <div>Hi there</div>
        {showList && <div>This is the list</div>}
    </div>;
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Example />);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

ReactJS：setTimeout() 在 return 内不工作？

ReactJS: setTimeout() not working inside return?

javascript

jsx

reactjs