web-dev-qa-db-ja.com

コンポーネント全体のthis.propsを正しく破壊する

今日、問題が発生しました。次のコンポーネントを検討してください。

_export default class Input extends React.Component {
  someFunction() {
    console.log(this.props.value)
  }

  render () {
    const { type, value, required } = this.props
    return (
      <div className={cx('Input')}>
        <input type={type} value={value} required={required} />
      </div>
    )
  }
}
_

_this.props_を正常に破棄し、レンダリング内で使用できますが、その外部、つまりsomeFunction()内でprop値を使用する必要がある場合はどうなりますか？ _constant { ... }_を移動し、_export default class Input extends React.Component {_行の直後に含めます。これはまだ有効ですか？

javascriptobjectreactjsecmascript-6react-jsx
13
Ilja

それを外部に移動すると、コンストラクターが呼び出されなかったため、nullになります。

親コンポーネントが状態を変更して子が再レンダリングされる可能性があるため、レンダリングまたは機能を維持することをお勧めします。したがって、レンダリングごとに新しい小道具が必要です。

8
Piyush.kapoor

コンポーネント全体のthis.propsを正しく破壊する

まあ、それはできません。分解ではローカル変数のみを割り当てることができるため、各関数でpropsを分解する必要があります。それ以外の場合は、this.props.valueを記述しなければならないことに何の問題もありません。 this.propsと入力したくないという理由だけでなく、読みやすくなる場合は破棄を使用します。

私はあなたのコードをこのように書きます

// import cx from whatever

const someFunction = value=> console.log(value)

export const Input = ({type, value, required}) => (
  someFunction(value),
  <div className={cx('Input')}>
    <input type={type} value={value} required={required} />
  </div>
)
7
user633183

多分それを機能的なコンポーネントに更新することを検討してください。

function someFunction(props) {
  console.log(props.value)
}

function Input(props) {
  const { type, value, required } = props;

  someFunction(props); // logs props.value

  return (
    <div className={cx('Input')}>
      <input type={type} value={value} required={required} />
    </div>
  )
}

export default Input;
3
RickTakes