Question

我有两个组件：按钮和进度条。单击按钮后，我想呈现进度条而不是按钮。当我在返回之前显示警报时，单击被正确处理。进度栏本身也正确呈现。因此，在单击按钮时呈现它只是一个问题。我对React很陌生，我看不出为什么我的代码无法正常工作。您能帮我理解问题吗？

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick () {
    return (
      <Bar />
    )
  }

  render () {
    return (
      <Button onClick={this.handleClick}>
        Click!
      </Button>
    );
  }

}

class Bar extends React.Component {

  render () {
    return (
      <ProgressBar>
        Here the progress will be shown.
      </ProgressBar>
    );
  }
}

Answer 1

React仅会渲染render函数中的内容，只要某些随机函数恰好返回了一个组件，只要该组件不是某个组件的render函数的一部分，这一事实就没有影响。

您可以通过以下方法解决此问题：确定条形图是否应该呈现并通过单击切换该状态。

沿

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
    this.state = {loading: false}; {/* state we use whether to show bar or not */}
  }

  handleClick () {
    this.setState({loading: true}); {/* when button click we remember it */}
  }

  render () {
    if (this.state.loading) {
       return (
         <Bar /> {/* <-- here we have it inside the render function! */}
       );
    } else {
        return (
          <Button onClick={this.handleClick}>
            Click!
          </Button>
        );
     }
  }

}

Answer 2

从函数返回JSX不会神奇地渲染它！您需要以某种方式将JSX放在class Article { constructor(public name: TranslatableProperty) { } } class TranslatableProperty { constructor(public propTranslation:Translation[]) { } public translate(language:string):string { return this.propTranslation.find(t=>t.language==language).text; } } class Translation { constructor( public language: string, public text: string ) { } } let a = new Article(new TranslatableProperty([ new Translation('EN', 'Yes'), new Translation('DE', 'Ja') ])); a.name.translate('EN');函数中。

这里是一种方法：

render

Answer 3

您无法更新这样的视图，这违反了规则。（因为我也是ReactJS的新开发者，所以我有不断的经验。）

使用条件渲染。例如https://reactjs.org/docs/conditional-rendering.html
在进度条上使用模式，并将其显示在按钮单击操作上。

Answer 4

您无法从正常函数返回组件，可以通过以下方式呈现进度条

class ProgressButton extends React.Component {

  constructor () {
    super()
    this.handleClick = this.handleClick.bind(this);
    this.state = {openBar:false}
  }

  handleClick () {
   this.setState({openBar:true})
  }

  render () {
    return (
      <div>
      <Button onClick={this.handleClick}>
        Click!
      </Button>
       {this.state.openBar &&<Bar/>}
      </div>
    );
  }

}

class Bar extends React.Component {

  render () {
    return (
      <ProgressBar>
        Here the progress will be shown.
      </ProgressBar>
    );
  }
}

Answer 5

那是行不通的。您可以尝试类似

import java.nio.ByteBuffer;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.Properties;
import java.util.concurrent.TimeUnit;

import org.postgresql.PGConnection;
import org.postgresql.PGProperty;
import org.postgresql.replication.LogSequenceNumber;
import org.postgresql.replication.PGReplicationStream;


public class PGStreamReceiver {

public static void main(String[] args) {
    try {
        LogSequenceNumber startLsn = LogSequenceNumber.valueOf("0/2D8D0F0");
         String url = "jdbc:postgresql://localhost:5432/postgres"
                 ;
         String user ="postgres";
          String password = "xxxx";
          Properties connectionProperties = new Properties();

          PGProperty.USER.set(connectionProperties, user);
          PGProperty.PASSWORD.set(connectionProperties, password);
          PGProperty.ASSUME_MIN_SERVER_VERSION.set(connectionProperties, PostgreSQLConstants.MINIMUM_SUPPORTED_POSTGRESQL_VERSION);
          PGProperty.REPLICATION.set(connectionProperties, PostgreSQLConstants.POSTGRESQL_REPLICATION_PROPERTY_VALUE);
          PGProperty.PREFER_QUERY_MODE.set(connectionProperties, PostgreSQLConstants.POSTGRESQL_REPLICATION_PREFERRED_QUERY_MODE);
          Connection postgresSQLConnection = DriverManager.getConnection(url, connectionProperties);
            PGConnection postgrePGConnectionWrapper = postgresSQLConnection.unwrap(PGConnection.class);
            PGReplicationStream stream = postgrePGConnectionWrapper.
                     getReplicationAPI()
                     .replicationStream()
                     .logical()
                     .withSlotName("pvn")
                     .withStartPosition(startLsn)
                     .withSlotOption(PostgreSQLConstants.INCLUDE_XID_IN_STREAM_CHANGES, true)
                     .withSlotOption(PostgreSQLConstants.INCLUDE_TIMESTAMP_IN_STREAM_CHANGES, true)
                     .withSlotOption(PostgreSQLConstants.EXCLUDE_EMPTY_TRANSACTION_IN_CHANGES, true)
                     //.withStatusInterval(PostgreSQLConstants.SERVER_FEEDBACK_TIME_INTERVAL_IN_SECONDS, TimeUnit.SECONDS)
                     .withStatusInterval(60, TimeUnit.SECONDS)
                     .start();
            while(true)
            {
                ByteBuffer msg = stream.read();
                if(msg == null)
                {
                    return;
                }
                int offset = msg.arrayOffset();
                byte[] source = msg.array();
                int length = source.length - offset;
                String logData = new String(source, offset, length);
                System.out.print("1");
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

单击按钮后组件不呈现

5 个答案: