LoginSignup
0
0

More than 3 years have passed since last update.

reactで別のコンポーネントを引数を渡しつつ呼び出す場合

Last updated at Posted at 2020-11-25

呼び出す側

<コンポーネント名 props名="値"/>の要領で書く

<td><GetPod name="vamdemic111aaa-app"/></td>

呼び出される側

  • propsに入る
  • this.props.nameで使うことができる
class GetPod extends Component {
    constructor(props) {
        super(props);
        this.state = {
            podstatus: ''
        }
    }

    // renderの前に実行される
    componentWillMount() {
    const json = {"Name":this.props.name};
    const convert_json = JSON.stringify(json);
    const obj = JSON.parse(convert_json);
    console.log(obj)
    console.log(this.props.name)
    const request = axios.create({
        baseURL: "http://127.0.0.1:1323",
        headers: {
            'Content-Type': 'application/json',
        },
        responseType: 'json',
        method: "GET"
   })

   request.get("/getpodstatus", obj)
        .then(request => {
           this.setState({
               // podstatus: request.data.items[0].status.phase
               podstatus: request.data.items[0].status.phase
           })
           console.log(this.state.podstatus)
       })
    }

    // コンポーネントが呼ばれたらstateを返すようにする
    render() {
        return <p>{this.state.podstatus}</p> ;
    }
}

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0