Question

我有一个使用reactjs和react-mdl构建的应用程序。有一个标签显示信息，剧集和演员表。当单击John的剧集时，标题中的Jane应该更改为其他文本，因此55个剧集加上选项卡下面的其他内容。我编码的代码是我想要的，但我觉得它不是正确的方法，而且有一个bug。我知道我的错，但不知道我怎么能解决它。

class MovieDetailView extends Component{
  constructor(props){
    super(props);
    this.state = {
      movie:[ ],
      activeTab:1
    }
  }

  render(){
    console.log("Tab ID: ", this.state.activeTab);
    let movie = this.state.movie;
    const mainCastJoin = _.join(movie.mainCast, ', ');
    if(!this.state.movie){
      return(
        <p>Loading</p>
      );
    }

    else{
      return(
        <div className="demo-big-content">
          <Layout fixedHeader fixedTabs>
              <Header>
                {this.state.activeTab >= 0 ? <HeaderComponent movie={this.state.movie} activeTab={this.state.activeTab}/> : ' '}
                  <HeaderTabs ripple activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })}>
                      <Tab>SHOW INFO</Tab>
                      <Tab>EPISODES</Tab>
                      <Tab>CAST</Tab>
                  </HeaderTabs>
                    <Link to="/"><i className="material-icons arrow_back">arrow_back</i></Link>
              </Header>
              <Content>
                  <div className="page-content">{this.state.activeTab >=0 ? <MovieInfo movie={this.state.movie} activeTab={this.state.activeTab} /> : ''}</div>
              </Content>
            </Layout>
          </div>
      );
    }
  }
}

export default MovieDetailView;

HeaderComponent.js

const HeaderComponent = ({activeTab, movie}) => {
  const mainCastJoin = _.join(movie.mainCast, ', ');
  const renderHeader =
    console.log('kk');
    if(activeTab === 0){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      );
    }

    if(activeTab === 1){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;episode
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    }

    if(activeTab === 2){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;main cast
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    }

  return(
    <div>{renderHeader}</div>
  )
}

export default HeaderComponent;

此代码有效但如果我删除console.log则会出现错误

Error in ./src/component/HeaderComponent.js
Syntax error: Unexpected token (10:4)

      const renderHeader =
       // console.log('kk');
      if(activeTab === 0){
          ^
         return(
           <div>
             <HeaderRow title={movie.title}>

我该如何解决这个问题？为什么会导致错误？解决此类问题的有效方法是什么？

更新

let renderHeader =  () => ({
   return(
    if(activeTab === 0){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      );
    }

    if(activeTab === 1){
      return(
        <div>
          <HeaderRow title={movie.title}>
            <IconButton name="more_vert" id="demo-menu-lower-left" />
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">date_range</i>&nbsp;episode
          </HeaderRow>
          <HeaderRow>
            <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
          </HeaderRow>
        </div>
      )
    })
}

纠正上面的代码不会产生任何输出。它反而给出了新的错误{this.renderHeader（）}

const renderHeader =  () => ({
     if(activeTab === 0){
     ^
              return(
              <div>
              <HeaderRow title={movie.title}>

Answer 1

5位专家已经在您的代码中说明了错误原因并提供了很好的解释。现在你遇到了另一个麻烦，你可以用我的解决方案克服这个麻烦但我也是学习者。我正在为自己分享这个解决方案，向这些专家学习。如果我要解决这个问题，我的解决方案就是

const ShowInfoHeader = (movie, mainCastJoin) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;{mainCastJoin}
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}

const EpisodeHeader = (movie) => {
  return(
    <div>
      <HeaderRow title={movie.title}>
        <IconButton name="more_vert" id="demo-menu-lower-left" />
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">date_range</i>&nbsp;episode
      </HeaderRow>
      <HeaderRow>
        <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 -
      </HeaderRow>
    </div>
  );
}


const HeaderComponent = ({activeTab, movie}) => {
  const mainCastJoin = _.join(movie.mainCast, ', ');

  if(activeTab===0){
  return(
    <div>{ShowInfoHeader(movie, mainCastJoin)}</div>
  )
}
if(activeTab===1){
  return(
    <div>{EpisodeHeader(movie)}</div>
  )
}
}

export default HeaderComponent;

如果这是解决此类问题的好方法，我会很感谢专家对这个解决方案的想法。

Answer 2

你必须在赋值操作符（=）后面有一些可以赋值给变量的东西（或者在这种情况下是常量）。

在工作代码中，您指定的返回值为console.log()。

在破损的代码中，您试图在那里放置if语句。

Answer 3

如果你想让变量包含if的结果，你必须将它包装成IIFE（即时调用的函数表达式）：

private async void ProgressDialog_Opened(ContentDialog sender, ContentDialogOpenedEventArgs args)
{
    ProgressDialog p = sender as ProgressDialog;
    await DoCopyingAsync(p);
}

或者，您可以这样做：

var renderHeader=(function(){
if(sth){
return "value";
}
return "standard";
})();

Answer 4

您尚未为renderHeader分配值！使用控制台取消注释，因为您在其上分配了console.log的结果。

Answer 5

您正在将const renderHeader =设置为console.log（）。这是允许的（它没有用，但允许）。

但是当你删除它时，你将“const renderHeader =”设置为if语句。解析器无法解析它并且您的JavaScript正在崩溃。

删除console.log会引发错误

5 个答案: