将道具传递到自定义轮播

时间：2017-05-23 17:48:05

标签： javascript reactjs react-bootstrap

我正在使用this.props然后数组选择来填充我的属性等。有没有更好的方法我可以通过道具来缩短this.props？还有其他人看到这个有什么问题吗？它仍然会自动滑动而不会受到控制＆＃34;。

import React, { Component } from 'react';
import { Carousel as BSCarousel } from 'react-bootstrap';

class Carousel extends Component {
  getInitialState() {
    return {
      index: 0,
      direction: null,
    };
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  render() {
    return (
      <BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
        <BSCarousel.Item>
          <img alt={this.props.alt} src={this.props.image} />
          <BSCarousel.Caption>
            <h3>{this.props.heading}</h3>
            <p>{this.props.caption}</p>
          </BSCarousel.Caption>
        </BSCarousel.Item>
      </BSCarousel>
    );
  }
}

export default Carousel;

修改 

import React, { Component } from 'react';
import { Carousel as BSCarousel } from 'react-bootstrap';

class Carousel extends Component {
  constructor(props) {
    super(props);

    this.state = { index: 0, direction: null };

    this.handleSelect = this.handleSelect.bind(this);
  }

  render() {
    const { alt, image, heading, caption } = this.props;

    return (
      <BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
        <BSCarousel.Item>
          <img alt={alt} src={image} />
          <BSCarousel.Caption>
            <h3>{heading}</h3>
            <p>{caption}</p>
          </BSCarousel.Caption>
        </BSCarousel.Item>
      </BSCarousel>
    );
  }
}

export default Carousel;

5 个答案:

答案 0 :(得分：1)

  

有没有更好的方法我可以通过道具来缩短this.props？

使用解构

render() {
    const {alt, image, heading, caption} = this.props

    return (
      <BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
        <BSCarousel.Item>
          <img alt={alt} src={image} />
          <BSCarousel.Caption>
            <h3>{heading}</h3>
            <p>{caption}</p>
          </BSCarousel.Caption>
        </BSCarousel.Item>
      </BSCarousel>
    );
  }
  

还有其他人看到这个有什么问题吗？

您需要先绑定handleSelect，然后再将其作为回调

传递 
class Carousel extends Component {
  constructor(props) {
     super(props)

     this.state = {/* initial state goes here*/}

     this.handleSelect = this.handleSelect.bind(this)
  }

  ... rest of your code

答案 1 :(得分：1)

您正在混合select distinct a.filename as arquivo_a , r.filename as arquivo_r from table1 a FULL JOIN table2 r ON SUBSTRING(a.filename,1,LEN(a.filename) - 4) = SUBSTRING(r.filename,1,LEN(r.filename) - 4) 编写React组件，es5 and es6中没有getInitialState方法。使用es6初始化constructor值。

像这样：

state

您可以在class Carousel extends Component { constructor() { super(); this.state = { index: 0, direction: null, }; } .... 方法中使用Object destructuring，而不是访问this.props.key，然后按键名称直接访问值，如下所示：

render

检查此代码段会引发错误，状态未定义：

render(){
   const {alt, image, heading, caption} = this.props;
   console.log(alt, image, heading, caption);
   return (
       <BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
           <BSCarousel.Item>
               <img alt={alt} src={image} />
               <BSCarousel.Caption>
                  <h3>{heading}</h3>
                  <p>{caption}</p>
               </BSCarousel.Caption>
           </BSCarousel.Item>
       </BSCarousel>
   )
}

class App extends React.Component{

   getInitialState(){
      return {a:1}
   }
   
   render(){
      return <div>Hello: {this.state.a}</div>
   }

}

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

答案 2 :(得分：1)

如果你厌倦了在任何地方看到 this.props ，你可以destructure这样的道具（与this.state相同，或者你想要分开的任何其他对象）： 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

答案 3 :(得分：1)

因为您使用的是ES6类，所以必须以不同方式进行设置。

将您的getInitialState()功能替换为：

constructor(props) {
    super(props);
    this.state = {
      index: 0,
      direction: null,
    };
    this.handleSelect = this.handleSelect.bind(this);
}

答案 4 :(得分：1)

你问过是否有办法清理你对this.props的所有电话，所以这里的大部分答案都提到了解构，这是一种清理你this.anything来电的好方法，但后来你也问过是否有人发现你的实现有什么问题，而且有些答案指出使用过时的getInitialState（而只是在构造函数中设置你的初始组件级状态，赋值为{{ 1}}），但是其他答案还没有解决的问题是你的实施限制了你的＆＃34; Carousel＆＃34;只通过道具传递的单个项目。 您应该做的是允许自己灵活地通过道具将任意数量的项目传递到您的Carousel组件。

对我而言，如果它只允许通过道具传递单个项目，那么它将是一个高限制的Carousel组件。

所以这就是我要做的。这个实现：

  1. 使用解构来清理所有重复的点符号，
  2. 在构造函数中声明组件级状态，
  3. 允许您通过道具传递任意数量的轮播项目
  4. 声明一个renderItems（）函数，该函数呈现this.state = {}元素
    5. 的集合
  5. 致电Carousel.Item组件，该组件负责创建实际的CarouselItem
  6. 确保将任何自定义函数绑定到构造函数中的Carousel.Item（当函数需要引用this上下文时需要），
  7. 使用spread运算符来清除对this
    8. 的多个调用

    <强>组件/ Carousel.js 

    this

    <强>部件/轮播/ CarouselItem.js 

    import React, { Component } from 'react';
import { Carousel } from 'react-bootstrap';
import CarouselItem from './CarouselItem'; // 5

class CustomCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = { // 2
      index: 0,
      direction: null,
    };
    this.handleSelect = this.handleSelect.bind(this); // 6
  }

  handleSelect(selectedIndex, e) {
    this.setState({
      index: selectedIndex,
      direction: e.direction,
    });
  }

  generateItems() { // 4
    const { items } = this.props;
    return items.map((item, index) => {
      const active = (index === item.id);
      return (<CarouselItem
        key={`CI${item.id}`}
        active={active}
        direction={this.state.direction}
        {...item} // 7
      />);
    });
  }

  render() {
    return (
      <Carousel
        activeIndex={this.state.index}
        direction={this.state.direction}
        onSelect={this.handleSelect}
      >
        {this.generateItems()}
      </Carousel>
    );
  }
}

export default CustomCarousel;

    现在你有一个干净的Carousel组件，可以接受任何数量的潜在＆＃34;项目＆＃34;。

    你可以这样打电话给你的自定义轮播：

    import React from 'react';
import { Carousel } from 'react-bootstrap';

const CarouselItem = (props) => {
  const { id, active, direction, image, alt, heading, caption } = props; // 1

  return (
    <Carousel.Item
      index={id}
      active={active}
      direction={direction}
    >
      <img alt={alt} src={image} />
      <Carousel.Caption>
        <h3>{heading}</h3>
        <p>{caption}</p>
      </Carousel.Caption>
    </Carousel.Item>
  );
};

export default CarouselItem;
相关问题
最新问题