reactjs複数の要素を渡す

Question

私はreactjsとsvgで遊んでいます。私はAppからCircleに複数の要素状態を渡そうとしています。

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')) 

Answer 1

Use ES6 spread operator:

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

：一度にそれを渡す方法は、以下のコードを参照してください

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

とは反対に、そこにありますサークル：

Answer 2

もちろん

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

<Circle {...props} /> 

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

Answer 3

することができます！オブジェクトにES2015スプレッド演算子を使用しています。 （JSX hereでそのことについてもっと）

それを使ってあなたのコードは次のようになります。

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'))