Javascript 将道具传递到定制旋转木马中

我正在使用this.props，然后使用数组选项填充我的属性等。。有没有更好的方法可以让我通过道具来缩短这个。道具？还有其他人认为这有什么问题吗？它仍在自动滑动，且未被“控制”

import React，{Component}来自'React'；
从“react bootstrap”导入{Carousel as BSCarousel}；
类Carousel扩展组件{
getInitialState（）{
返回{
索引：0，
方向：空，
};
}
handleSelect（选择索引，e）{
这是我的国家({
索引：selectedIndex，
方向：即方向，
});
}
render（）{
返回(
{this.props.heading}
{this.props.caption}

);
}
}
导出默认旋转木马；

编辑

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;

import React，{Component}来自'React'；
从“react bootstrap”导入{Carousel as BSCarousel}；
类Carousel扩展组件{
建造师（道具）{
超级（道具）；
this.state={index:0，direction:null}；
this.handleSelect=this.handleSelect.bind（this）；
}
render（）{
const{alt，image，heading，caption}=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>
    );
  }

有没有更好的方法可以让我通过道具来缩短这个。道具

使用解构

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>
    );
  }

---

您正在混合编写React组件的

es5和es6

，在

es6

中没有

getInitialState

方法。使用

构造函数

初始化

状态

值

像这样：

class Carousel extends Component {

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

....

您可以使用inside

render

方法，而不是访问

this.props.key

，然后直接按键名访问值，如下所示：

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

import CustomCarousel from './path/to/Carousel';

const arrayOfItemObjects = [
  {...},
  {...},
  {...}
];

<CustomCarousel 
   items={arrayOfItemObjects} // 3
/>

render（）{
const{alt，image，heading，caption}=this.props；
日志（alt、图像、标题、标题）；
返回(
{标题}
{标题}

)
}

检查此代码段，它将抛出错误，状态未定义：

类应用程序扩展了React.Component{
getInitialState（）{
返回{a:1}
}
render（）{
return Hello:{this.state.a}
}
}
ReactDOM.render（，document.getElementById（'app'））

---

您正在混合编写React组件的

es5和es6

，在

es6

中没有

getInitialState

方法。使用

构造函数

初始化

状态

值

像这样：

class Carousel extends Component {

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

....

您可以使用inside

render

方法，而不是访问

this.props.key

，然后直接按键名访问值，如下所示：

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

import CustomCarousel from './path/to/Carousel';

const arrayOfItemObjects = [
  {...},
  {...},
  {...}
];

<CustomCarousel 
   items={arrayOfItemObjects} // 3
/>

render（）{
const{alt，image，heading，caption}=this.props；
日志（alt、图像、标题、标题）；
返回(
{标题}
{标题}

)
}

检查此代码段，它将抛出错误，状态未定义：

类应用程序扩展了React.Component{
getInitialState（）{
返回{a:1}
}
render（）{
return Hello:{this.state.a}
}
}
ReactDOM.render（，document.getElementById（'app'））

如果你厌倦了到处都能看到this.props，你可以这样做（与this.state或任何其他你想分离的对象相同）：

render（）{
const{alt，heading，image，caption}=this.props；
返回(
{标题}
{标题}

);
}

如果你厌倦了到处都能看到this.props，你可以这样做（与this.state或任何其他你想分离的对象相同）：

render（）{
const{alt，heading，image，caption}=this.props；
返回(
{标题}
{标题}

);
}

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

将

getInitialState（）

函数替换为：

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

---

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

将

getInitialState（）

函数替换为：

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

---

您曾询问是否有方法清理对

this.props的所有调用，因此这里的大多数答案都提到了解构，这是清理对
this.anythis的调用的好方法，但是您还询问是否有人发现您的实现有任何问题，一些答案指出，我们使用的是过时的
getInitialState
（而不是简单地在构造函数中设置初始组件级状态，并分配给
this.state={}
），，但其他答案没有意识到的是，您的实现限制了您的“旋转木马”通过道具传入的单个项目相反，您应该做的是允许自己灵活地通过道具将任意数量的项目传递到旋转木马组件。

对我来说，如果它只允许通过道具传递单个项目，那么它将是一个高度限制的旋转木马组件

这就是我要做的。这一实施：

使用解构来清除所有重复的点符号
在构造函数中声明组件级状态
允许您通过道具传入任意数量的旋转木马项目
声明一个renderItems（）函数，用于呈现
Carousel.Item