小编ins*_*ral的帖子

刚开始学习react.js和javascript.我正在浏览facebook的github上的所有文档,但是仍然坚持这一点.

在提升状态向上章节中的Calculator类的handleCelsiusChange方法中有以下行:

this.setState({scale: 'c', value});

因此,比例将获得值'c'.好的.但这个价值究竟是什么呢？它不应该是一个键值对吗？我检查了setState()的解释:

第一个参数可以是一个对象(包含零个或多个要更新的键)或一个函数(state和props),它返回一个包含要更新的键的对象.

但它没有说明这种用法.

谢谢!:)

我正在尝试使用语义用户界面反应动态创建文档列表。我想在单击列表项时取回文档标题。根据文档： https: //react.semantic-ui.com/elements/list

由于这个原因有一个onItemClick道具，但是当我使用它时，我在渲染它时收到警告：

警告：失败的道具类型：道具onItemClick与List道具冲突：children。它们不能一起定义，只能选择其中之一。

另外，单击列表项不会执行任何操作（atm 我只想将文档标题记录到控制台）。这是代码：

handleListItemClick(event, data) {
  console.log("list item clicked: " + data.value);
}


buildResultsContainer() {
    return this.props.listOfResults.map((document,index) =>
      {
        return (
            <List.Item
              as='a'
              key={index}>
                <Icon name='file' />
                <List.Content>
                  <List.Header>{document.properties.title}</List.Header>
                  <List.Description>
                    {document.properties.description}
                  </List.Description>
                </List.Content>
            </List.Item>
      );
      }
    );
  }

  render() {
    return (
      <div>
        <List onItemClick={this.handleListItemClick}>
          {this.buildResultsContainer()}
        </List>
      </div>
    )
  }

您能告诉我如何正确使用 List 组件的 onItemClick 属性吗？

不太重要的是，您对如何重构列表渲染有什么建议吗？只是想让渲染函数保持简短和干净，但是这个函数调用看起来有点矫枉过正......

多谢！

因此，我想稍后再浪费时间，并想做一个动态生成的页面。因此，我想从一个对象读取组件数据，如下所示：

  layout: {
    toolbar: {
      components: [
        {
          type: "Testcomp",
          theme: "default",
          data: "div1"
        },
        {
          type: "Testcomp",
          theme: "pro",
          data: "div2"
        },
      ]}}

该组件将被动态导入，启用/激活，此外，这是应该动态呈现组件的jsx代码：

render() {
    const toolbarComponents = userSession.layout.toolbar.components.map(Component => (
      <Component.type theme={Component.theme} data={Component.data} key={this.getKey()} />
    ));

    return (
      <div>
        <div className="toolbar">
          toolbar
          {toolbarComponents}
        </div>
    . . .
      </div>
    );
  }

但是我在Chrome的devtool中收到以下警告，该组件也未显示：

警告：使用了不正确的外壳。将PascalCase用于React组件，或将小写用于HTML元素。

警告：此浏览器无法识别该标签。如果要渲染React组件，请以大写字母开头。

我的代码有什么问题？

我在很多例子中看到了以下实践，即使只有一个道具：

render() {
  const { thisProp, thatProp } = this.props;

  return (
    <Component passedPropA={thisProp} passedPropB={thatProp} />
  );
}

创建相同数据的另一个副本有什么好处？为什么不直接使用这样的道具呢？

render() {

  return (
    <Component passedPropA={this.props.thisProp} passedPropB={this.props.thatProp} />
  );
}