Question

我正在使用.wrapper { display: grid; grid-gap: 10px; grid-template-columns: 600px 300px; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 20px; } .a { grid-column: 1 / 2; grid-row: 1; } .b { grid-column: 2 ; grid-row: 1 / 2; } .c { grid-column: 1 ; grid-row: 2 ; }提供的列表。在rowRenderer中，我返回一个更复杂的组件。该组件为其定义了一些事件。触发事件时，应使用新结构更新此组件的一部分，例如，在行内呈现新输入。在List中使用时，这似乎不起作用。

react-virtualized

这是rowRenderer：

<List height={height} width={1800} rowCount={this.state.leads.length} rowHeight={rowHeight} rowRenderer={this.rowRenderer} />

这是触发特定事件时应显示的元素：

rowRenderer(props) {

let opacityvalue = 1
if (this.state.deleted.indexOf(props.index) >= 0) {
    opacityvalue = 0.3
}

return (
            <LeadItem {...props}
            lead={this.state.leads[props.index]}
            leadKey={props.index}
            ...
            />
)}

编辑：这是一个简单的例子，我证明了自己的观点。 https://codesandbox.io/s/2o6v4my7pr 当用户按下按钮时，行内必须出现一个新元素。

更新：我现在看到它与此有关： https://github.com/bvaughn/react-virtualized#pure-components

Answer 1

我认为您可以通过将此媒体资源传递给List as mentioned in the docs来实现您的目标：

<List
  {...otherListProps}
  displayDiv={this.state.displayDiv}
/>

组件的render方法是在react-virtualized rowRenderer中运行的

1 个答案: