JSX印刷テキスト

Question

私は、このコンポーネントを持っている：

<Button type="submit" { invalid ? 'primary': null }> 

このコンポーネントはコンポーネントスタイル設定さ：

import styled from 'styled-components'; 

export const Button = styled.button` 
    font-size: 15px; 
    padding: 0.25em 1em; 
    border: solid 1px ${(props) => { 
     let color; 
     if (props.primary) { 
     color = 'red'; 
     } else { 
     color = '#ffffff'; 
     } 
     return color; 
    }}; 
    `; 

私はこのエラーを取得する：

Syntax error: Unexpected token ^invalid, expected ... (64:54)

無効になっている場合は、「プライマリ」プロパティを送信して、これを取得する必要があります。

<Button type="submit" primary/> 

私が書き込みをしたくない：

primary = { invalid } 

コンポーネントは、このボタンは呼び出します。

import React from 'react'; 
import { Button } from './layouts/cssstyled'; 
const getConditionalProps = (props) => { 
    // fill your `invalid` variable in this function or pass it to it 
    const myprops = {}; 
    myprops.primary = true ; 
    myprops.secondary = false; 
    return myprops; 
} 

const Form = (props) => { 
    console.log('form props'); 
    console.log(props); 

    const { handleSubmit, invalid, pristine, reset, submitting, t } = props; 
    return (
    <form onSubmit={handleSubmit}> 
     <p>Invalid? {JSON.stringify(invalid)}</p> 

     <Button type="submit" disabled={submitting} primary={invalid ? "" : null} > 
      Buton styled component does not work 
     </Button> 
     <button primary={invalid ? "" : null}> button native works</button> 

     <div className="formError"> 
      {pristine} 
      {invalid && t('form.haserrors')} 
     </div> 

     </div> 

    </form> 
); 
}; 

export default reduxForm({ 
    form: 'CustomerForm', // a unique identifier for this form 
})(Form); 

Answer 1

あなたの条件は次のようになりますので、あなたは、ブール値を使用することができます。

<Button type="submit" primary={ !!invalid } > 

また、falseの場合にボタンにプライマリ値を設定したくない場合は、これを行うことができます：

const button = invalid ? <Button type="submit" primary > : <Button type="submit" > 

Answer 2

私はReact-JS Spread Attributesを使用することをお勧めします。条件付きの振る舞いを持つコンポーネント上の小道具を広めるための素晴らしいツールです。

class MyComponent extends React.Component { 
    // ... 

    getConditionalProps() { 
     const props = {}; 
     // fill your `invalid` variable in this function or pass it to it 
     if (invalid) { 
      props.primary = true; 
     } 
     return props 
    } 

    render() { 
     return (
      <Button type="submit" 
        { ...this.getConditionalProps() } /> 
     ); 
    } 
} 

別の解決策は、条件付きのレンダリングです：

class MyComponent extends React.Component { 
    // ... 

    render() { 
     return (invalid ? 
      <Button type="submit" primary /> 
      : 
      <Button type="submit" /> 
     ); 
    } 
} 

あなたの問題へのよりよい解決策があるかもしれないことに注意してください：あなたがする必要があります特定の小道具を送信するかどうかを親コンポーネントから決定しようとするのではなく、コンポーネント自体の内部からButtonコンポーネントの動作を処理します。しかし、上記のソリューションはあなたが必要としているものとまったく同じです。