Блог

#reactjs #jsx

#reactjs #jsx

Вопрос:

 class PaddingStyle extends Component {
    constructor( props ) {
        super( ...arguments )
    }

    render() {
        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props.attributes; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
    }
}


export default PaddingStyle;
 

 import PaddingStyle from '../../components/padding/style';

<div 
  style={{
   padding: <PaddingStyle paddingTop={ paddingTop } paddingRight={ paddingRight } paddingBottom={ paddingBottom } paddingLeft={ paddingLeft } />,
  }}
>
</div>
 

 export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}
 

Комментарии:

1. «Это не работает» — недостаточно точное описание ошибки, чтобы мы могли вам помочь. Что не работает? Как это не работает? Какие проблемы у вас с вашим кодом? Вы получаете сообщение об ошибке? Что это за сообщение об ошибке? Является ли результат, который вы получаете, не тем результатом, который вы ожидаете? Какой результат вы ожидаете и почему, какой результат вы получаете и чем они отличаются? Является ли поведение, которое вы наблюдаете, не желаемым поведением? Каково желаемое поведение и почему, каково наблюдаемое поведение и чем они отличаются?

2. Похоже, вы используете компонент React только для интерполяции строк, и не совсем понятно, почему. Кроме того, вы все равно не передаете значения в качестве реквизита атрибутов. Просто const paddingStyle = ({ top, right, bottom, left }) => `${top ? `${top}px` : 0}...`; было бы достаточно.

3. Вы не понимаете, какой фреймворк используете, мой друг. вы не возвращаете элемент в свой компонент react. это, вероятно, вызывает исключение. Если вы хотите, чтобы служебная функция выполняла этот стиль заполнения за вас .. затем создайте служебную функцию. Я настоятельно рекомендую вам прочитать документы по React перед его использованием

4. @jonrsharpe или сделать его более встроенным const paddingStyle = ({ top = 0, right = 0, bottom = 0, left = 0 }) => `${top}px ${right}px ${bottom}px ${left}px`;

5. работает ли мой ответ ниже? пожалуйста, дайте некоторые отзывы, я новичок в ответе на вопросы о StackOverflow

Ответ №1:

 const { paddingTop, paddingRight, paddingBottom, paddingLeft } = this.props;
const top = paddingTop ? `${paddingTop}px` : 0;
const right = paddingRight ? `${paddingRight}px` : 0;
const bottom = paddingBottom ? `${paddingBottom}px` : 0;
const left = paddingLeft ? `${paddingLeft}px` : 0;
 

 <div 
  style={{
   padding: `${top} ${right} ${bottom} ${left}`,
  }}
>
</div
 

Комментарии:

1. Необходим второй компонент, потому что я добавляю дополнение в несколько компонентов. Я не хочу переписывать его каждый раз.

2. Тогда, я думаю, вы можете использовать глобальное состояние и передавать свои дополнения дочерним классам в качестве реквизита. Нет необходимости создавать компонент класса для целей стилизации.

Ответ №2:

 export default function paddingStyle( props ) {

        const { paddingTop, paddingRight, paddingBottom, paddingLeft } = props; 

        const top = paddingTop ? `${paddingTop}px` : 0;
        const right = paddingRight ? `${paddingRight}px` : 0;
        const bottom = paddingBottom ? `${paddingBottom}px` : 0;
        const left = paddingLeft ? `${paddingLeft}px` : 0;

        return (
            `${top} ${right} ${bottom} ${left}` 
        )
}
 

Комментарии:

1. Я не голосовал против, но вы снова пытаетесь неправильно использовать react. Вы не должны рендерить компонент для подобных целей стилизации. Было бы лучше просто вызвать функцию и использовать параметры вместо компонента с реквизитами. Он же, style={{padding: paddingStyle({paddingTop: value, paddingBottom: value...})}} . По сути, вы могли бы оставить функцию такой же, если бы она была реализована таким образом.

2. @JohnRuddell я рендерю компонент, потому что я использую этот стиль заполнения в нескольких компонентах. я не хочу редактировать каждый из них каждый раз, когда хочу внести изменения в стиль. Почему это неверно, если оно выполняет эту работу?

3. Я понимаю, что вы пытаетесь сделать его динамичным. Я говорю, что это не компонент, и он не должен им быть. Потому что в React компонент возвращает элемент, подобный HTML, записанный в JSX. Вы должны сделать эту функцию служебной функцией, а не компонентом

4. @JohnRuddell но разве это не единственный способ передать реквизит? Я не уверен, как еще я мог бы этого добиться. Я думал, что компонент объявляется с использованием class SomeName extends Component . У меня есть функция, нет? :/

5. Как вы его используете? <paddingStyle /> Функция может быть компонентом в зависимости от того, как вы ее используете. Также я бы переместил его в папку utilltiy и извлек из компонентов, чтобы было понятно 🙂 1 от меня!