मैं एक स्वयं का कस्टम टैब घटक बना रहा हूं। इसमें एक टैब हेडर होता है जिसमें प्रत्येक का एक बॉडी पार्ट होता है। जब एक टैब हेडर पर क्लिक किया जाता है, तो संबंधित बॉडी की शैली को display:block और अन्य सभी को display:none पर सेट किया जाना चाहिए।

कुछ कारणों से मुझे यह त्रुटि मिल रही है:

ऑब्जेक्ट की केवल संपत्ति 'शैली' पढ़ने के लिए असाइन नहीं किया जा सकता

मैं समझता हूं कि मुझे स्टाइल प्रॉपर्टी को मैन्युअल रूप से बदलने की अनुमति नहीं है क्योंकि ऐसा लगता है कि यह केवल पढ़ने के लिए है लेकिन मैं इसे कैसे ठीक/काम कर सकता हूं?

यहाँ मेरा कोड है:

टैब.जेएस

import React, { Component } from 'react';

class Tabs extends Component {

  constructor() {
    super();
    this.state = {
      activeIndex: 0,
    };
    this.tabHeads = [];
  }

  // Initial composition of tab heads
  componentWillMount() {
    React.Children.map(this.props.children, (el, i) => {
      const tab = el;
      const key = `tabKey${i}`;
      this.tabHeads.push((
        <div role="button" onClick={e => this.onTabClick(e, i)} key={key}>{tab.props.title}</div>
      ));
    });
  }

  // Called when user clicks a tab head
  onTabClick(e, i) {
    this.setState({ activeIndex: i });
  }

  render() {
    // Set display none or block for each tab
    React.Children.map(this.props.children, (el, i) => {
      const tab = el;
      let visibility = 'none';
      if (i === this.state.activeIndex) visibility = 'block';
      const newStyle = Object.assign({}, tab.props.style, { display: visibility });
      tab.props.style = newStyle;
    });

    return (
      <div style={this.props.style}>
        {this.tabHeads}
        {this.props.children}
      </div>
    );
  }
}

export default Tabs;

उपयोग इस प्रकार है:

render() {
  const tabStyles = [
    { padding: '20px' }, // Tab 0
    { padding: '20px' }, // Tab 1
  ];

  <Tabs>

    <Tab style={tabStyles[0]} title="Tab1">
      <div>Content 1</div>
    </Tab>

    <Tab style={tabStyles[1]} title="Tab2">
      <div>Content 2</div>
    </Tab>

  </Tabs>
}
7
Timo Ernst 25 मई 2017, 20:32
आप किसी प्रोप को किसी भिन्न मान पर पुन: असाइन नहीं कर सकते हैं। प्रॉप्स केवल पढ़ने के लिए हैं। अपने डिजाइन का पुनर्मूल्यांकन करें।
 – 
Andrew Li
25 मई 2017, 20:34
2
"मैं इसे कैसे ठीक कर सकता/सकती हूं?" बच्चे को क्लोन करें: facebook.github.io/react/docs/react-api.html#cloneelement
 – 
Felix Kling
25 मई 2017, 20:34

1 उत्तर

सबसे बढ़िया उत्तर

आप इस पंक्ति में गुण मान बदलने का प्रयास करें:
tab.props.style = newStyle;
लेकिन props रिएक्ट में केवल-पढ़ने के लिए हैं और आप उनके मूल्यों को मैन्युअल रूप से नहीं बदल सकते हैं। कृपया प्रतिक्रिया docs की जांच करें अधिक विवरण।
इसे ठीक करने के लिए आप React.cloneElement का उपयोग कर सकते हैं जो अनुमति देता है नए गुणों के साथ तत्व को क्लोन करने के लिए जिसे मौजूदा में विलय कर दिया जाएगा:

render() {
    let childrenWithNewProps = React.Children.map(this.props.children, (el, i) => {
        let visibility = 'none';
        if (i === this.state.activeIndex) visibility = 'block';
        return React.cloneElement(el, {
               style: {
                 display: visibility
               }
           }
        )
    });

    return (
          <div style={this.props.style}>
            {this.tabHeads}
            {childrenWithNewProps}
          </div>
    );
}
8
Bartek Fryzowicz 25 मई 2017, 20:57
हम्म, धन्यवाद अब त्रुटि दूर हो गई है लेकिन शैली सेट नहीं है। अगर मैं घटक को console.log(this.props.children) के साथ देखता हूं तो मुझे लगता है कि घटक की शैली संपत्ति शून्य है। मैं यह कैसे तय करुं?
 – 
Timo Ernst
25 मई 2017, 20:52
2
उत्तर अपडेट किया गया - क्लोन किए गए तत्वों के साथ सरणी का उपयोग JSX में किया जाना चाहिए
 – 
Bartek Fryzowicz
25 मई 2017, 20:58
अच्छा है, लेकिन इसे देखें: /52180309/…. State.myStyle फिर से तैयार किया गया है ...
 – 
Nikola Lukic
5 सितंबर 2018, 11:25