Question

我目前有一个正在从事的React项目。我的render方法看起来像这样，进入了我的return方法：

   render() {
     let elements = [];
     this.dropdownCounter().forEach(item => {
       if(item != "attributeProduct") {
         console.log('setting');
         elements.push(
           <Dropdown
             title={this.state[item][0]['title']}
             arrayId={item}
             list={this.state[item]}
             resetThenSet={this.resetThenSet}
           />
         );
       }
    });
    this.state.attributeProduct.map(attributeItem => {
      elements.push(
        <Dropdown
          title={attributeItem.name}
          arrayId='attributeMetaProduct'
          list={
            this.state.attributeMetaProduct.filter(metaItem => metaItem.attribute_id == attributeItem.ID)
          }
          resetThenSet={this.resetThenSet}
        />
      );
    });
    return (

由于依赖于其他方法的下拉菜单不同，我在渲染区域进行了大量代码。有办法代替我吗？

render() {
  allMyPrereturnStuff()
  return()
}

然后将所有这些代码放在allMyPrereturnStuff()中？我尝试过创建此函数并将所有内容传递给该函数，但是由于所有“ this”都无法正常运行。有什么想法吗？

Answer 1

是的，您可以轻松地将普通的javascript表达式放入JSX：

return (
  <div>
    {this.renderStuff()}
    {this.renderOtherStuff()}
    {this.renderMoreStuff()}
  </div>
);

您甚至可以基于标志：

const shouldRenderMoreStuff = this.shouldRenderMoreStuff();

return (
  <div>
    {this.renderStuff()}
    {this.renderOtherStuff()}
    {shouldRenderMoreStuff ? this.renderMoreStuff() : null}
  </div>
);

请注意，在组件中使用除常规render*方法之外的render方法通常是一种反模式。相反，每个render*方法都应该是其自己的组件。

Answer 2

别忘了将allMyPrereturnStuff()方法绑定到构造函数中，这样“ this”将在其中起作用。

constructor(props) {
    super(props);
    // ... your existing code
    this.allMyPrereturnStuff = this.allMyPrereturnStuff.bind(this);
}

allMyPrereturnStuff = (params) => {
   // ... all the code
}

但是，您可能需要考虑将代码分解为组件，这是 Reacty 的处理方式。

例如，您可以重构此

this.state.attributeProduct.map(attributeItem => {
      elements.push(<Dropdown
        title={attributeItem.name}
        arrayId='attributeMetaProduct'
        list={
          this.state.attributeMetaProduct.filter(metaItem => metaItem.attribute_id == attributeItem.ID)
        }
        resetThenSet={this.resetThenSet}
        />);
    });

对于类似（伪伪）的东西：

const DropdownList = (props) => {
    return (<Dropdown
            title={props.attributeItem.name}
            arrayId='attributeMetaProduct'
            list={props.list}
            resetThenSet={props.resetThenSet}
            />);
}

在原始组件的render函数中，有类似

的内容

render() {
    return (this.state.attributeProduct.map(attributeItem => {
      <DropdownList attributeItem={attributeItem}
        list={ this.state.attributeMetaProduct.filter(metaItem => metaItem.attribute_id == attributeItem.ID) }
        resetThenSet={this.resetThenSet}
        />);
}

如何在函数中放置返回码：React

2 个答案: