Как сделать компонент который может работать с содержимым как с аттрибутом в React?

Question

Я знаю что реакт компонент может использовать данные из своих свойств props, как в данном случае:

const SomeComp = props => {
  return <div>props.value</div>
}

const BaseComp = props => {
 return <SomeComp value="Some value" />
}

Но можно ли как то сделать так, чтобы он доставал данные из того, что хранит компонент между своего открывающео и закрывающего тега?

const BaseComp = props => {
 return <SomeComp>Some value</SomeComp>
}

Answer 1

В любом компоненте доступны props.children. Это контент между открывающим и закрывающим тегом компонента.

const SomeComp = (props) => {
  return <div>{props.children}</div>
}

Для классовых компонентов используйте this.props.children

Answer 2

<script>
    class LimitTextarea extends HTMLElement {
        constructor() {
            super();

            // this.maxText = this.getAttribute('maxchars') || 500;
            this.attachShadow({ mode: 'open' });

            this.shadowRoot.innerHTML = `
            <div>
                <textarea></textarea>
                <span id="charCount"></span>
            </div>
            `;

            this.textarea = this.shadowRoot.querySelector('textarea');
            this.charCount = this.shadowRoot.getElementById('charCount');

            this.textarea.setAttribute('maxlength', this.maxText);
            this.textarea.addEventListener('input', this.handleInput.bind(this));
        }

        handleInput() {
            const value = this.textarea.value;
            const chars = this.maxText - value.length;

            const isValid = chars >= 0;

            this.charCount.textContent = `${chars} символов`;

            this.dispatchEvent(new CustomEvent('change', {
                detail: {
                    value: isValid ? value : value.substring(0, this.maxText),
                    valid: isValid
                }
            }));
        }

        static get observedAttributes() {
            return ['maxchars'];
        }

        attributeChangedCallback(name, oldValue, newValue) {
            if (name === 'maxchars' && oldValue !== newValue) {
                this.maxText = newValue;
                this.textarea.setAttribute('maxlength', this.maxText);
                this.handleInput();
            }
        }
    }

    customElements.define('limit-textarea', LimitTextarea);
</script>

<limit-textarea maxchars="250"></limit-textarea>

БЛОГ НА HUSL

Как сделать компонент который может работать с содержимым как с аттрибутом в React?

Ответы (2 шт):