背景

Question

目的

仅显示填写的字段。

背景

在我的申请中，人们将首先填写申请表，其中包括“早期注册费，提前注册日期，常规注册费，常规注册日期”等等，在填写完所有信息并点击“查看个人资料”后将看到所有字段是否填写。

如果其中一个字段的值为null或未定义，则它不会显示在配置文件中。

我试图这样做，我开始在构造函数中创建一个状态“this.state {value：''}”

class CompetitionProfileView extends React.Component {

    constructor(props) {
        super(props);
        this.state {value: ''}
        this.getContactCard = this.getContactCard.bind(this);
    }

    getCompetitionValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? value : '';
    }

    getCompetitionDateValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? value.toDateString() : '';
    }

    getCompetitionTimeValue(path) {
        const value = _.get(this.props.competition, path);
        return value ? `${
            value.getHours() - 12 
        }:${value.getMinutes()}` : '';
    }

    getContactCard(num) {
        return 
        this.getCompetitionValue(`Information.contactFirstName${num}`) ?
        <Card key={num} style={{backgroundColor: '#f9f9f9', width: '32%'}} zDepth={2}>
        <CardTitle title={`${this.getCompetitionValue(`Information.contactFirstName${num}`)} ${this.getCompetitionValue(`Information.contactFirstName${num}`)}`} subtitle={`${this.getCompetitionValue('Information.contactPosition1')}`} />
       <Divider/>
                      <CardText>
                        <p style={{display: 'flex', justifyContent: 'center'}}><Phone/>{`${this.getCompetitionValue(`Information.contactFirstName${num}`)}`}</p>
                        <p style={{display: 'flex', justifyContent: 'center'}}><Email/>{`${this.getCompetitionValue(`Information.contactFirstName${num}`)}`}</p>
                      </CardText>
                    </Card>
                :
                    '';
            }

            render(actions) {
              return (
                <div>
                  <div className="profileheader" style={{display: 'flex', flexDirection: 'column'}}>
                    <Paper className='banner-image' style={{backgroundImage: `url(${this.getCompetitionValue('Resources.boardPicture.url')})`,backgroundSize: 'cover',width: '100%', height: '200px', backgroundPositionY: '20%'}} zDepth={3}>
                      {/* <br style={{lineHeight: '15'}}/> */}
                    </Paper>
                    <Paper className='text-main' style={{textAlign: 'center'}}>
                      <label>{this.getCompetitionValue('Information.name')}</label>
                    </Paper>
                    <Paper className='logo-image' style={{backgroundImage: `url(${this.getCompetitionValue('Resources.competitionLogo.url')})`, backgroundSize: 'cover', width: '100px', height: '100px', marginTop: '-110px', marginLeft: '3%', paddingbottom: '20px'}} zDepth={3}/>
                  </div>

                  <hr/>

                  <div style={{display: 'flex', justifyContent: 'space-between'}}>
                  <Card style={{backgroundColor: '#f9f9f9', width: '49%'}} zDepth={2}>
                    <RaisedButton style={{display: 'flex', justifyContent: 'center'}} primary={true} label="Application Packet" onClick={() => window.open(this.getCompetitionValue('Resources.applicationPacket.url'), '_blank')}/>
                  </Card>
                  <Card style={{backgroundColor: '#f9f9f9', width: '49%'}} zDepth={2}>
                    <RaisedButton style={{display: 'flex', justifyContent: 'center'}} primary={true} label="Audition Video Info" onClick={() => window.open(this.getCompetitionValue('Resources.auditionVideoInfo.url'), '_blank')}/>
                  </Card>
                  </div>

                  <br/>

                  <div className='mainbody' style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between'}}>


                    <br/>

                    <div className='rightbody' style={{display: 'flex', flexDirection: 'column', width: '60%', flexWrap: 'wrap'}}>
                      <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                        <CardHeader title="About Us" />
                        <Divider/>
                        <CardText>{`${this.getCompetitionValue('Information.compBlurb')}`}</CardText>
                      </Card>
                      <br/>
                      <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                        <CardHeader title="Application Information" />
                        <Divider/>
                        <CardText>
                          <p><b>Early Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateEarly')}`}</p>
                          <p><b>Early Reg Fee:</b>{` ${this.getCompetitionValue('Information.earlyDues')}`}</p>
                          <p><b>Regular Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateRegular')}`}</p>
                          <p><b>Regular Reg Fee:</b>{` ${this.getCompetitionValue('Information.regularDues')}`}</p>
                          <p><b>Late Reg:</b>{` ${this.getCompetitionDateValue('Information.dueDateLate')}`}</p>
                          <p><b>Late Reg Fee:</b>{` ${this.getCompetitionValue('Information.lateDues')}`}</p>
                          <p><b>Applications Due At:</b>{` ${this.getCompetitionTimeValue('Information.dueTime')}`}</p>
                          <p><b>Time Zone:</b>{` ${this.getCompetitionValue('Information.timeZone')}`}</p>
                          <p><b>Penalties:</b>{` ${this.getCompetitionValue('Information.extraFees')}`}</p>
                          <p><b>Hear Back Date:</b>{` ${this.getCompetitionDateValue('Information.hearbackDate')}`}</p>
                          <p><b>Payment Method:</b>{` ${this.getCompetitionValue('Information.paymentMethods')}`}</p>
                          <br/>
                        </CardText>
                      </Card>
                    </div>
                  </div>

                   <br/>

                  <div className="contactinfo" style={{display: 'flex', justifyContent: 'space-around'}}>
                    {[1,2,3].map((num) => this.getContactCard(num))}
                  </div>
                   <br/>
                  {this.props.competition.Board.length > 0 &&
                  <Card style={{backgroundColor: '#F0EFEF'}} zDepth={2}>
                  <Table >
                    <TableHeader adjustForCheckbox={false} displaySelectAll={false}>
                      <TableRow>
                        { Object.keys(this.props.competition.Board[0]).map((key) => <TableHeaderColumn key={key}>{key}</TableHeaderColumn>) }
                      </TableRow>
                    </TableHeader>
                    <TableBody displayRowCheckbox={false}>
                      {this.props.competition.Board.map((row, i) => (
                          <TableRow key={i}>
                            { Object.keys(row).map((column) => <TableRowColumn key={column}>{row[column].name ? row[column].name : row[column]}</TableRowColumn>) }
                          </TableRow>
                        ))
                      }
                    </TableBody>
                  </Table>
                  </Card>
                  }
                </div>
              );
            }
          }

          const mapStateToProps = (state) => {
            return {
              messages: state.messages
            };
          };

          export default connect(mapStateToProps)(CompetitionProfileView);

Answer 1

您可以在const knexfile = require('../../knexfile'); const knex = require('knex')(knexfile.development); const Model = require('objection').Model; class BaseModel extends Model { $beforeUpdate() { this.updated_at = knex.fn.now(); } } module.exports = BaseModel;函数中使用if语句，如下所示：

render()

您甚至可以使用render() { if (this.props.thing1) { return <h1>Thing 1</h1> } else { return ( <div className="warning"> <h2>Thing 2</h2> </div> ) } }函数中的函数：

render()

您可以使用它将大型renderASmallPart() { if (this.props.thing1) { return <h1>Thing 1</h1> } else { return ( <div className="warning"> <h2>Thing 2</h2> </div> ) } } render() { return ( <div> <h1>My App</h1> <h2>Here's a thing:</h2> {this.renderASmallPart()} </div> ) }函数拆分为较小的函数，以检查其字段的值是什么，并仅在字段具有非空值时呈现某些内容

Answer 2

您需要查看条件渲染，并仅在有值时渲染该元素。

https://facebook.github.io/react/docs/conditional-rendering.html

https://atticuswhite.com/blog/render-if-conditionally-render-react-components/

http://devnacho.com/2016/02/15/different-ways-to-add-if-else-statements-in-JSX/

https://kylewbanks.com/blog/how-to-conditionally-render-a-component-in-react-native

ReactJS在用户配置文件中仅显示具有值的字段

目的

背景

2 个答案: