Question

我一直在使用此代码

{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />

在React中的返回方法中，一切正常，因为我没有添加AppForm，但是当我添加AppForm时，它给了我一个错误：语法错误：意外的令牌。

你能帮帮我吗？感谢。

编辑：

如果用户已登录（显示为true），我希望显示Content和AppForm

这是我完整的渲染代码：

return (
  <div>
    {this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />
    : this.state.display === false ?
      <Forms
        create={this.createUser}
        sign={this.signUser}
      />
    : 'Error'
    }
</div>
);

Answer 1

您应该发布所有代码。基于此，我可以猜到两个问题之一：

{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />

1：?是三元运算符。这些是if this, then do this, else do this。对于像您正在编写的那样的内联条件，使用{this.state.display === true ? &&可能更合适。如果您确实需要<Content />或<AppForm />，具体取决于条件

{this.state.display === true ? (
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      ) : (
      <AppForm />
      )

2：JSX要求将所有返回的元素包装在一个元素中。这通常使用arbitray <div>标记来完成。

return (
<div>
{this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
      <AppForm />
</div>
)

如果这有帮助，那太好了！如果没有，您需要提供有关代码的更多信息，以便我们提供帮助。

编辑：您正在使用三元运算符

return (
  <div>
    {this.state.display === true ?
      this.state.content.map((q) => {
        <Content
          id={q.id}
          key={q.id}
          content={q.content}
          deleteRow={this.deleteRow()}
        />
      })
    :
      <Forms
        create={this.createUser}
        sign={this.signUser}
      />
    }
    <AppForm />
</div>
);

该代码应该工作^

基本上，?是一个隐含的if，else语句。

true ? 
    console.log('true')
:
    console.log('false')

如果?左侧的语句为真，则评估:左侧的语句，否则评估:右侧的语句。您不能提供第二个条件，或者给它两个以上的选项。如果需要，您可以嵌套三元运算符，但语法应始终为condition ? if true do this : if false do this

Answer 2

我冒昧地完全重写了它：

render() {
    const {
        display
        content
    } = this.state;
    let component = (
        <Forms
            create={this.createUser}
            sign={this.signUser}
        />
    );

    if(display) {
        const mappedContent = content.map((q) => {
            return (
                <Content
                    id={q.id}
                    key={q.id}
                    content={q.content}
                    deleteRow={this.deleteRow.bind(this)}
                />
            );
        })
        component = [
            mappedContent,
            <AppForm
                key="AppForm"
            />
        ];
    }

    return (
        <div>
            {component}
        </div>
    );
}

一些事情：

如果显示不正确，那么它是假的吗？如果不是这样，请不要使用布尔值。
不要犹豫，分配变量值，它有助于构建代码。

关于您的意外令牌，如果显示为假，您在测试后错过了: {something}语句。

React JS：语法错误：意外的令牌

2 个答案: