Javascript 我可以通过道具传递要使用的对象的名称吗？_Javascript_Reactjs_React Native_Ecmascript 6

Javascript 我可以通过道具传递要使用的对象的名称吗？

javascript reactjs react-native ecmascript-6

Javascript 我可以通过道具传递要使用的对象的名称吗？,javascript,reactjs,react-native,ecmascript-6,Javascript,Reactjs,React Native,Ecmascript 6,我想要完成的是：我已经基于TouchableOpacity创建了按钮组件。在我的应用程序中，我有3种不同外观的按钮，它们都有一些共同的风格，也有一些特定的东西。下面是my Button.js的外观： import React, { Component } from 'react'; import { Text, TouchableOpacity } from 'react-native'; class Button extends Component { render() { co

我想要完成的是：我已经基于TouchableOpacity创建了按钮组件。在我的应用程序中，我有3种不同外观的按钮，它们都有一些共同的风格，也有一些特定的东西。下面是my Button.js的外观：

import React, { Component } from 'react';
import { Text, TouchableOpacity } from 'react-native';

class Button extends Component {
  render() {
    const { children, onPress, style } = this.props;
    const { buttonStyle, textStyle } = styles;

    return (
      <TouchableOpacity onPress={onPress} style={[buttonStyle]}>
        <Text style={[textStyle]}>
          {children}
        </Text>
      </TouchableOpacity>
    );
  }
}

//Commonly shared button styles
const styles = {
  textStyle: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15
  },
  buttonStyle: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15
  }
};

//Below are specific appearance styles
const black = {
  container: {
    backgroundColor: '#000'
  },
  text: {
    color: '#FFF'
  }
};

const white = {
  container: {
    backgroundColor: '#FFF'
  },
  text: {
    color: '#000'
  }
};

import React，{Component}来自'React'；
从“react native”导入{Text，TouchableOpacity}；
类按钮扩展组件{
render（）{
const{children，onPress，style}=this.props；
const{buttonStyle，textStyle}=样式；
返回(
{儿童}
);
}
}
//常用共享按钮样式
常量样式={
文本样式：{
对齐自我：“中心”，
尺寸：17，
paddingTop:15，
垫底：15
},
按钮样式：{
自我定位：“拉伸”，
marginLeft:15，
marginRight:15
}
};
//下面是具体的外观样式
常数黑={
容器：{
背景颜色：“#000”
},
正文：{
颜色：'#FFF'
}
};
常数白色={
容器：{
背景颜色：“#FFF”
},
正文：{
颜色：“#000”
}
};

如果我能用这样的按钮，那就太好了：

<Button onPress={} style='black'>PLAY</Button>
<Button onPress={} style='white'>CANCEL</Button>

import React, { PropTypes } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

// Commonly shared button styles
const defaultStyle = StyleSheet.create({
  textStyle: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15,
  },
  buttonStyle: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15,
  },
});

// Below are specific appearance styles
const black = StyleSheet.create({
  container: {
    backgroundColor: '#000',
  },
  text: {
    color: '#FFF',
  },
});

const white = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
  },
  text: {
    color: '#000',
  },
});

const themes = {
  black,
  white,
};

function Button({ children, onPress, theme }) {
  const buttonStyles = [defaultStyle.buttonStyle];
  const textStyles = [defaultStyle.textStyle];

  if (theme) {
    buttonStyles.push(themes[theme].container);
    textStyles.push(themes[theme].text);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>
        {children}
      </Text>
    </TouchableOpacity>
  );
}

Button.propTypes = {
  onPress: PropTypes.func.isRequired,
  theme: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
};

export default Button;

播放
取消

例如，默认按钮样式和文本样式是从样式对象应用的。我只想传递一个单词（'black'，'white'）来引用Button组件中描述的其他样式对象

我知道我可以用switch创建一个helper方法，但我认为有一种更短的方法可以做到这一点。有吗

非常感谢

根据我对您问题的理解，请看一下：-

var styleChangeForButton,styleChangeForText
class Button extends Component {
  constructor(props)
  {
    super(props)
    const { children, onPress, style } = this.props;
    const { buttonStyle, textStyle } = styles;
    styleChangeForButton = [buttonStyle]
    styleChangeForText = [textStyle]

  }
  onPress()
  {
       styleChangeForButton = 'black'
       styleChangeForText = 'white'
  }

  render() {

  //

    style
    return (
      <TouchableOpacity onPress={onPress} style={styleChangeForButton}>
        <Text style={styleChangeForText}>
          {children}
        </Text>
      </TouchableOpacity>
    );
  }
}

//Commonly shared button styles
const styles = {
  textStyle: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15
  },
  buttonStyle: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15
  }
};

//Below are specific appearance styles
const black = {
  container: {
    backgroundColor: '#000'
  },
  text: {
    color: '#FFF'
  }
};

const white = {
  container: {
    backgroundColor: '#FFF'
  },
  text: {
    color: '#000'
  }
};

var styleChangeForButton，styleChangeForText
类按钮扩展组件{
建造师（道具）
{
超级（道具）
const{children，onPress，style}=this.props；
const{buttonStyle，textStyle}=样式；
styleChangeForButton=[buttonStyle]
styleChangeForText=[textStyle]
}
onPress（）
{
styleChangeForButton='黑色'
styleChangeForText='white'
}
render（）{
//
风格
返回(
{儿童}
);
}
}
//常用共享按钮样式
常量样式={
文本样式：{
对齐自我：“中心”，
尺寸：17，
paddingTop:15，
垫底：15
},
按钮样式：{
自我定位：“拉伸”，
marginLeft:15，
marginRight:15
}
};
//下面是具体的外观样式
常数黑={
容器：{
背景颜色：“#000”
},
正文：{
颜色：'#FFF'
}
};
常数白色={
容器：{
背景颜色：“#FFF”
},
正文：{
颜色：“#000”
}
};

您可以这样做：

<Button onPress={} style='black'>PLAY</Button>
<Button onPress={} style='white'>CANCEL</Button>

import React, { PropTypes } from 'react';
import { StyleSheet, Text, TouchableOpacity } from 'react-native';

// Commonly shared button styles
const defaultStyle = StyleSheet.create({
  textStyle: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15,
  },
  buttonStyle: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15,
  },
});

// Below are specific appearance styles
const black = StyleSheet.create({
  container: {
    backgroundColor: '#000',
  },
  text: {
    color: '#FFF',
  },
});

const white = StyleSheet.create({
  container: {
    backgroundColor: '#FFF',
  },
  text: {
    color: '#000',
  },
});

const themes = {
  black,
  white,
};

function Button({ children, onPress, theme }) {
  const buttonStyles = [defaultStyle.buttonStyle];
  const textStyles = [defaultStyle.textStyle];

  if (theme) {
    buttonStyles.push(themes[theme].container);
    textStyles.push(themes[theme].text);
  }

  return (
    <TouchableOpacity onPress={onPress} style={buttonStyles}>
      <Text style={textStyles}>
        {children}
      </Text>
    </TouchableOpacity>
  );
}

Button.propTypes = {
  onPress: PropTypes.func.isRequired,
  theme: PropTypes.string,
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
  ]),
};

export default Button;

import React，{PropTypes}来自'React'；
从“react native”导入{样式表，文本，TouchableOpacity}；
//常用共享按钮样式
const defaultStyle=StyleSheet.create({
文本样式：{
对齐自我：“中心”，
尺寸：17，
paddingTop:15，
填充底部：15，
},
按钮样式：{
自我定位：“拉伸”，
marginLeft:15，
marginRight:15，
},
});
//下面是具体的外观样式
const black=StyleSheet.create({
容器：{
背景颜色：“#000”，
},
正文：{
颜色：“#FFF”，
},
});
const white=StyleSheet.create({
容器：{
背景颜色：“#FFF”，
},
正文：{
颜色：“#000”，
},
});
常量主题={
黑色
白色
};
功能按钮（{children，onPress，theme}）{
常量buttonStyles=[defaultStyle.buttonStyle]；
const textStyles=[defaultStyle.textStyle]；
如果（主题）{
buttonStyles.push（主题[theme].container）；
textStyles.push（主题[theme].text）；
}
返回(
{儿童}
);
}
Button.propTypes={
onPress:PropTypes.func.isRequired，
主题：PropTypes.string，
儿童：PropTypes.oneOfType([
PropTypes.arrayOf（PropTypes.node），
PropTypes.node，
]),
};
导出默认按钮；

我认为这是最短、最干净的方法

import React, { PropTypes } from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ children, onPress, type }) => (
  <TouchableOpacity onPress={onPress} style={[styles.defaultButton, styles[type].button]}>
    <Text style={[styles.defaultText, styles[type].text]}>
      {children}
    </Text>
  </TouchableOpacity>
);

Button.propTypes = {
  children: PropTypes.node.isRequired,
  onPress: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['white', 'black']).isRequired,
};

const styles = {
  defaultButton: {
    alignSelf: 'stretch',
    marginLeft: 15,
    marginRight: 15
  },
  defaultText: {
    alignSelf: 'center',
    fontSize: 17,
    paddingTop: 15,
    paddingBottom: 15
  },
  white: {
    button: {
      backgroundColor: '#FFF'
    },
    text: {
      color: '#000'
    }
  },
  black: {
    button: {
      backgroundColor: '#000'
    },
    text: {
      color: '#FFF'
    }
  },
};

export default Button;

你不需要把你的风格放在一个数组中，如果它是唯一的，那么这篇文章可能会对你有所帮助。我会根据按钮制作单独的组件WhiteButton和BlackButton，这样您的按钮组件就不会有任何其他逻辑，除了它自己的逻辑。甚至更好的名字应该是PrimaryButton和SecondaryButton，而不是让名字特定于他们的风格。按钮组件将提供一个按钮的基本功能-它可以被按下，容器和文本可以以任何方式设置样式。您可以重用它来创建更复杂的组件，因为很多东西都可以按，但它们看起来可能会非常不同。@DominicTobias谢谢。我只是在玩黑白风格的游戏。@karman谢谢你！谢谢你的帮助。我将使用这个解决方案。你能解释一下，block Button.propTypes={…}是做什么的吗？我试着不用它就做了，但它仍然很好。此外，“isRequired”的变化是什么？我的意思是，无论我是否需要它，如果我通过“blaaack”或什么都不通过，我仍然会看到应用程序崩溃，也就是说，如果它是未定义的。很好，解决方案是有用的。您应该始终将PropType添加到React组件中，以便其他开发人员看到该组件应该接收什么类型的数据。您肯定应该阅读这篇文章，因为每个React开发人员都必须使用propTypes:）