Javascript 我的if语句有什么错？

我正在将我已经为另一个项目构建的网站移植到React中，希望为我的导航栏设置一个状态，并试图设置条件以首先呈现我的页面，但它不断抛出语法错误

我尝试将{}封闭改为if-to（），看看这是否有什么作用。我还尝试将if包装在{（）}内，但什么也没有

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    return (
      <div>
        <NavBar />
        {if (this.state.page === 1) {
          return (<Products />)
        } else if(this.state.page === 2) {
          return (<Contact />)
        } else {
          <Landing />
        }}
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
render（）{
返回(
{if（this.state.page==1）{
返回（）
}else if（this.state.page==2）{
返回（）
}否则{
}}
);
}
}

与括号无关，您可以尝试以下方法：

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent() {
    if (this.state.page === 1) {
      return <Products />;
    } else if(this.state.page === 2) {
      return <Contact />;
    } else {
      return <Landing />;
    }
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.renderContent()}
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
renderContent（）{
if（this.state.page==1）{
返回；
}else if（this.state.page==2）{
返回；
}否则{
返回；
}
}
render（）{
返回(
{this.renderContent（）}
);
}
}

与括号无关，您可以尝试以下方法：

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent() {
    if (this.state.page === 1) {
      return <Products />;
    } else if(this.state.page === 2) {
      return <Contact />;
    } else {
      return <Landing />;
    }
  }

  render() {
    return (
      <div>
        <NavBar />
        {this.renderContent()}
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
renderContent（）{
if（this.state.page==1）{
返回；
}else if（this.state.page==2）{
返回；
}否则{
返回；
}
}
render（）{
返回(
{this.renderContent（）}
);
}
}

您应该使用like

{this.state.page==1？：this.state.page==2？：}

您应该使用like

{this.state.page==1？：this.state.page==2？：}

另一种方法是：

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        { (page === 1) && <Products /> }
        { (page === 2) && <Contact /> }
        { (page !== 1 && page !== 2 ) && <Landing /> }
        <Footer />
      </div>
    );
  }

render（）{
const{page}=this.state；
返回(
{（第===1页）&&}
{（第===2页）&&}
{（第！==1页和第！==2页）和&}
);
}

另一种方法是：

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        { (page === 1) && <Products /> }
        { (page === 2) && <Contact /> }
        { (page !== 1 && page !== 2 ) && <Landing /> }
        <Footer />
      </div>
    );
  }

render（）{
const{page}=this.state；
返回(
{（第===1页）&&}
{（第===2页）&&}
{（第！==1页和第！==2页）和&}
);
}

最简单的方法如下：

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        {page === 1 && <Products />}
        {page === 2 && <Contact />}
        {page !== 1 && page !== 2 &&
          <Landing />
        }
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
render（）{
const{page}=this.state；
返回(
{page==1&&}
{page==2&&}
{page！==1&&page！==2&&
}
);
}
}

最简单的方法如下：

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  render() {
    const { page } = this.state;

    return (
      <div>
        <NavBar />
        {page === 1 && <Products />}
        {page === 2 && <Contact />}
        {page !== 1 && page !== 2 &&
          <Landing />
        }
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
render（）{
const{page}=this.state；
返回(
{page==1&&}
{page==2&&}
{page！==1&&page！==2&&
}
);
}
}

另一种方法是使用映射器对象和默认值

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent(val) {
    let obj = {
      1: Products,
      2: Contact,
    }
    return obj[val] || Landing
  }

  render() {
    let Component = this.renderContent(this.state.page)
    return (
      <div>
        <NavBar />
          <Component />
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
渲染内容（val）{
设obj={
1：产品，
2:联系,，
}
返回obj[val]| |着陆
}
render（）{
让组件=this.renderContent（this.state.page）
返回(
);
}
}

另一种方法是使用映射器对象和默认值

class App extends Component {
  state = {
    page: 0,
  }
  setPageChange = () => {
    setState({ page: props.key })
  }

  renderContent(val) {
    let obj = {
      1: Products,
      2: Contact,
    }
    return obj[val] || Landing
  }

  render() {
    let Component = this.renderContent(this.state.page)
    return (
      <div>
        <NavBar />
          <Component />
        <Footer />
      </div>
    );
  }
}

类应用程序扩展组件{
状态={
页码：0，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
渲染内容（val）{
设obj={
1：产品，
2:联系,，
}
返回obj[val]| |着陆
}
render（）{
让组件=this.renderContent（this.state.page）
返回(
);
}
}

这里是一个快速演示

函数导航栏（）{
返回Hello导航栏；
}
函数页脚（）{
返回Hello，Footer；
}
函数着陆（）{
返回你好，着陆；
}
功能联系人（）{
回复你好，联系；
}
功能产品（）{
返回你好，产品；
}
类应用程序扩展了React.Component{
状态={
页码：1，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
renderContent（）{
if（this.state.page==1）{
返回；
}else if（this.state.page==2）{
返回；
}否则{
返回；
}
}
render（）{
返回(
{this.renderContent（）}
);
}
}
render（，document.getElementById（“根”））

这里是一个快速演示


函数导航栏（）{
返回Hello导航栏；
}
函数页脚（）{
返回Hello，Footer；
}
函数着陆（）{
返回你好，着陆；
}
功能联系人（）{
回复你好，联系；
}
功能产品（）{
返回你好，产品；
}
类应用程序扩展了React.Component{
状态={
页码：1，
}
setPageChange=（）=>{
setState（{page:props.key}）
}
renderContent（）{
if（this.state.page==1）{
返回；
}else if（this.state.page==2）{
返回；
}否则{
返回；
}
}
render（）{
返回(
{this.renderContent（）}
);
}
}
render（，document.getElementById（“根”））

props.key
从哪里来？不能将if-else放在return语句中。请将它移到return语句上方，并在变量中获取组件，然后将其打印为return。props.key

从何而来？不能将if-else放在return语句中。请把它移到return语句上面，把组件放在一个变量中，然后把它打印成return。我们必须避免嵌套的三元组