Правильно this.props для уничтожения того всего компонента

я наткнулся на вопрос сегодня, рассмотрим следующий компонент:Правильно 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> 
    ) 
    } 
}

Я успешно destrucutring this.props и может использовать их в визуализации, однако, что если мне нужно использовать prop вне его, то есть внутри someFunction() Я не уверен, что будет последствиями, если я выберу constant { ... } и включу сразу после export default class Input extends React.Component { линии. Будет ли это еще справедливо?

источник

2016-06-29 Ilja

Если вы сделаете это, 'this.props' будет неопределенным, так как он будет выполняться до того, как элемент отображается. Почему вы хотите это сделать? –

@JuanMendes для согласованности, поэтому мне не нужно писать this.props вне рендеринга, а также – Ilja

Я не вижу смысла в том, что вы делаете, пытаясь избежать дублирования 'const {type, value, required} = this .props'? Плохая идея, я бы сказал, вполне вероятно, что вам понадобятся разные значения в разных методах. Если вы напишете реальный пример с дублированием, которого вы хотели бы избежать, тогда у вас есть лучший вопрос. Непонятно, зачем вам это нужно, похоже, вы переработали его. –

Если вы переместите его снаружи, они будут пустыми, потому что в это время конструктор не получил бы вызов.

Это рекомендательный подход, чтобы сохранить его в рендере или функции, потому что ваш родительский компонент может изменить состояние, которое приведет к тому, что ваш ребенок получит рендер, поэтому вам нужны свежие реквизиты для каждого рендеринга.

источник

2016-06-29 15:55:50

Возможно, подумайте об обновлении его до функционального компонента.

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;

источник

2016-06-29 15:53:26 RickTakes

Я думаю, что OP хочет, чтобы переменные 'type, value, required' уже были определены в других функциях? Трудно понять, что OP действительно ищет ... –

А я вижу. Думаю, им придется пройти мимо. Решение redux прекрасно справится с этим. – RickTakes

Правильно деструктурирующие 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> 
)

источник

2016-06-29 16:17:25 naomik

Правильно this.props для уничтожения того всего компонента

ответ

Смежные вопросы