个人中心
gpt4 book ai didi

javascript - 为什么 在多次渲染时不显示复选框？
转载 作者：行者123 更新时间：2023-11-30 11:51:44 25 4
gpt4 key购买 nike

我正在使用 <Table/>来自 http://www.material-ui.com/#/components/table .当我渲染 <TableRowColumn/> 时根据数组中有多少对象多次，复选框不会出现。例如，如果有两个对象，它会呈现两行，但不会显示复选框。可能是什么问题？

全新编辑

所以 FileTable.js在另一个页面上呈现，并由索引路由内的按钮触发 Home.js . 

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={RequireAuth(App)}
          path='App'
        >
          <IndexRoute
            component={Home}
          />
          <Route
            component={FileTable}
            path='/FileTable'
          />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

和App.js是:

class App extends Component {

  render() {

    return (
        <div>
          {React.cloneElement(this.props.children, this.props)}
        </div>
    );
  }
}

我完全按照您的实现方式并获得了正确的属性 queryVehicles , 然而当我按下 Home.js 上的按钮时现在我收到以下错误:

enter image description here

最佳答案

根据您收到的浏览器警告，听起来您有一个独特的 React 组件封装了 TableRow (“FileTableRow”)。

当您遍历 TableBody 中的某些数据时，您将看到使用 TableRow 之间的不同行为关于复选框行为的内联(如在您的代码片段中)和一个单独的组件(如 <FileTableRow />)。

当前执行 TableBody和 TableRow , 如果你想有一个单独的 FileTableRow组件，您需要按如下方式拥有它才能显示复选框。

const FileTableRow = (props) => {
  const { children, Date, Start_Time, End_Time, Type, ...rest } = props

  // The checkbox element will be inserted by the <TableBody> as a child
  // of this component. So if we have a separate row component like this,
  // we need to manually render it from the props.children

  // We also use {...rest} to pass any other props that the parent <TableBody />
  // passed to this component. This includes any handlers for the checkbox.
  return (
    <TableRow {...rest}>
      {children[0]}
      <TableRowColumn>{Date}</TableRowColumn>
      <TableRowColumn>{Start_Time}</TableRowColumn>
      <TableRowColumn>{End_Time}</TableRowColumn>
      <TableRowColumn>{Type}</TableRowColumn>
    </TableRow>
  )
}

此外，警告听起来像是您正在包装 <TableRow /> <div /> 中的组件, 应该避免。

编辑:

添加了 {...rest} 的用法将任何其他 Prop 传递给 <TableRow>

在以下位置添加了一个工作示例:http://www.webpackbin.com/4kNnhM2o-

编辑 2:

添加了一个修改后的示例，其内容似乎更符合提问者的数据结构。 http://www.webpackbin.com/VkuA-FbhZ

编辑 3:

使组件有状态以捕获和记录选定的行。由于他们的一些怪癖 Table实现，需要转Table成一个受控组件。 http://www.webpackbin.com/EyhKEDNhb

关于javascript - 为什么 <Table/> 在多次渲染时不显示复选框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39244730/

25 4 0
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com