2016-03-29 27 views
0

Ben reajs ve svg ile oynuyorum. Uygulamadan Çembere birçok öğe durumunu geçmeye çalışıyorum.reactjs çoklu elemanlar geçmek

class Circle extends React.Component { 
    render() { 
    return (
     <svg height="100" width="100"> 
     <circle cx="50" cy="50" r="40" 
      stroke="black" stroke-width="3" fill="red" 
     /> 
     </svg> 
    ) 
    } 
} 

class App extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     h: 100, 
     w: 100, 
     cx: 50, 
     cy: 50, 
     r: 40, 
     stroke: "black", 
     fill: "red" 
    } 
    } 
    render() { 
    return (
     <div> 
     <Circle /> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app')) 
+2

'<Çember {... this.state} />':

bakmak olacağını kullanarak Kodunuz gibi (JSX here yılında bu konuda daha fazla) – azium

cevap

3

Use ES6 spread operator:

render() { 
    return (
     <div> 
     <Circle {...this.state} /> 
     </div> 
    ) 
} 

Of: Aşağıdaki kodu bakın

<Circle h={this.state.h} w={this.state.w} and so on /> 

aksine tek seferde geçirmeden bir yolu var mı Ve sonra Circle:

class Circle extends React.Component { 
    render() { 
    const { h, x, y, w, r, stroke, fill } = this.props; 
    return (
     <svg height={h} width={w}> 
     <circle cx={x} cy={y} r={r} 
      stroke={stroke} stroke-width="3" fill={fill} 
     /> 
     </svg> 
    ) 
    } 
} 
1

ders

const props = { 
    w: this.state.w, 
    h: this.state.h, 
    ... 
} 

<Circle {...props} /> 

// or pass content of `state` 
<Circle {...this.state} /> 
1

Yapabilirsiniz! Nesnede ES2015 yayılma işlecini kullanma.

class Circle extends React.Component { 
    constructor (props) { 
    super(props) 
    console.log(this.props) 
    } 
    render() { 
    return (
     <svg height="100" width="100"> 
     <circle cx="50" cy="50" r="40" 
      stroke="black" stroke-width="3" fill="red" 
     /> 
     </svg> 
    ) 
    } 
} 

class App extends React.Component { 
    constructor() { 
    super() 
    this.state = { 
     h: 100, 
     w: 100, 
     cx: 50, 
     cy: 50, 
     r: 40, 
     stroke: "black", 
     fill: "red" 
    } 
    } 
    render() { 
    return (
     <div> 
     <Circle {...this.state}/> 
     </div> 
    ) 
    } 
} 

ReactDOM.render(<App />, document.getElementById('app'))