1

我有一个带有条件渲染的组件：'如果组件具有道具“showCross”，则显示一个带有十字的按钮，除非什么都没有'。一切正常，当有 showCross 时，就有十字架，除非什么都没有：

import PropTypes from 'prop-types'
import React from 'react'
import {Cell} from 'react-mdl/lib/Grid'

class RefundFormContent extends React.Component {
  render() {
    const { fields, onClose } = this.props
    const style = {width: '150px'}

    function CrossButton(props) {
        let {showCross} = props
        const displayCross =
          showCross ? <button
              className="mdl-button mdl-js-button mdl-button--icon"
              onClick={onClose}
          >x</button>
              : null
        return (
            <div>{displayCross}</div>
        )
    }


    return (
        <React.Fragment>
            <Cell col={3}>
                <Formfield {...fields.type} style={style} />
            </Cell>
            <Cell col={4}>
                <Formfield {...fields.provider} style={style} />
            </Cell>
            <Cell col={4}>
                <Formfield {...fields.amount} style={style} />
            </Cell>
            <Cell col={1} className="mdl-typography--text-right">
                <CrossButton showCross />
            </Cell>
        </React.Fragment>
    )
  }
}

export default RefundFormContent

但问题是当我在另一个组件中使用这个组件时，即使 prop 被传递给 false，十字仍然显示（我想隐藏它）：

import PropTypes from 'prop-types'
import React from 'react'
import Grid from 'react-mdl/lib/Grid'
import Form from 'forms/Form'
import {validateCurrency} from 'forms/inputs/currency'
import {makeChoices} from 'forms/utils'
import RefundFormContent from './RefundFormContent'


const RefundForm = (
    {values=null, types, providers, onClose, showCross=false}
) => {

const fields = {
    type: {
        label: 'Type',
        choices: makeChoices(types),
        floatingLabel: true,
    },
    provider: {
        label: 'Demandeur',
        choices: makeChoices(providers),
        floatingLabel: true,
    },
    amount: {
        label: 'Montant',
        validators: [validateCurrency],
        floatingLabel: true,
        placeholder: 'euros',
    },
    comment: {
        label: 'Commentaire',
        required: false,
        floatingLabel: true,
    },
}
return (
    <Grid style={{backgroundColor: '#EEE', boxShadow: '1px 1px 5px 0 #A9A', 
     margin: '20px 0'}}>
        <Form
            component={RefundFormContent}
            componentProps={{onClose}}
            fields={fields}
            showCross={false}
        />
    </Grid>
  )
}

export default RefundForm

控制台没有错误，只是没有按预期显示。通过 React 开发者工具我可以看到 props 和预期一样为 false，但是显示不符合显示条件（即：'display nothing'）。最重要的是故事书，但我不确定这与显示问题有关：

import React from 'react'
import { storiesOf } from '@storybook/react'
import RefundAssignment from '../account/RefundAssignment'

storiesOf('RefundAssignment', module)
    .add('Affectation', () =>
        <RefundAssignment
            types={['1', '2', '3']}
            providers={['Deborah', 'Patrick', 'Severine', 
'Patrick Swayze']}
            showCross={false}
        />
    )
4

4 回答 4

0
  1. 将CrossButton功能移出RefundFormContent组件
  2. 也很高兴看到RefundFormContent（最好有一个 jsbin 演示）
  3. 您showCross在RefundFormContent's 渲染中使用：<CrossButton showCross />但它不是通过道具定义的：const { fields, onClose, showCross } = this.props
于 2018-03-26T10:04:50.357 回答
0 
import PropTypes from 'prop-types'
import React from 'react'
import {Cell} from 'react-mdl/lib/Grid'

const CrossButton = (props) => {
        return <div>{props.visible ? <button
              className="mdl-button mdl-js-button mdl-button--icon"
              onClick={props.onClick}>x</button> : null}</div>
    }


class RefundFormContent extends React.Component {
  render() {
    let fields = this.props.fields;
    let style = {width: '150px'};

    return (
        <React.Fragment>
            <Cell col={3}>
                <Formfield {...fields.type} style={style} />
            </Cell>
            <Cell col={4}>
                <Formfield {...fields.provider} style={style} />
            </Cell>
            <Cell col={4}>
                <Formfield {...fields.amount} style={style} />
            </Cell>
            <Cell col={1} className="mdl-typography--text-right">
                <CrossButton visible={this.props.showCross} onClick={this.props.onClose}/>
            </Cell>
        </React.Fragment>
    )
  }
}

export default RefundFormContent

或者，您只能CrossButton在应该使用短路显示时调用，因此在上面的代码中，更改为CrossButton：

const CrossButton = (props) => {
        return <div><button
              className="mdl-button mdl-js-button mdl-button--icon"
              onClick={props.onClose}
          >x</button></div>
    }

在你们中render，RefundFormContent你们会使用：

//...
<Cell col={1} className="mdl-typography--text-right">
            {this.props.showCross && <CrossButton onClick={this.props.onClose}/>}
        </Cell>
//...

编辑：

要验证它是否RefundFormContent有效，只需将其渲染为：

<RefundFormContent fields={fields} showCross={true} onClose={onClose}/>

请注意，上面fields必须onClose是您希望使用的道具。

以上将起作用的问题是，RefundFormContent在 OP 中调用是正确的方法吗？：

<Form component={RefundFormContent}
            componentProps={{onClose}}
            fields={fields}
            showCross={false}
        />

这里有多种道具，如果 Form 正确地将上述内容传递给 RefundFormContent，那么它应该可以正常工作。

于 2018-03-26T10:11:06.133 回答
0

在RefundFormContent你没有通过showCross，而只是告诉元素始终是“showCrossed”..

与 相同<input type="checkbox" checked />。

你会像这样使用它：

<CrossButton showCross={this.props.showCross} />
于 2018-03-26T10:35:57.967 回答
0

由于您的回答使我走上正轨，我发现了问题：

  • 三元组起作用了
  • 道具通过组件很好地传递

--> 问题是在每个组件中定义一个 defaultProps 来清楚地说明预期的行为。（我认为调用或不调用 showCross 会告诉我是否要显示十字架，但不是）。所以你可以使用类似的东西：

static defaultProps = {
    showCross: false,
}

或者 ：

const {showCross=false} = this.props;

并在回报

<RefundCheckbox
   types={types}
   providers={providers}
   showCross={showCross}
/>

如果 showCross = false 则不会显示十字，如果 showCross = true 则会显示。

于 2018-03-26T14:18:45.847 回答