我试图在某个页面上以不同的方式定位该组件。但是，当我为它提供另一个 className 属性时，它仅使用声明组件时提供的原始类的样式。

成分：

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {
    return (
      <div className={styles.labelClass} />
    );
  }
}

export default Label;

我想以不同方式定位它的页面：

import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';

class Page extends Component {

  render() {
    return (
      <div>
          <Label className={styles.positionLeft} />
      </div>
    );
  }

}

export default Page;

通常我会使用自定义样式来执行此操作，但我必须使用媒体查询，因此在这种情况下这是不可能的。

目标

我试图基于Google Material Design布局模仿React和Redux中的列表控件组件.

列表控件将允许您创建,重命名和删除列表中的项目,而无需导航到新页面.

对于行动重命名和删除列表项将在显示弹出菜单组件通过点击每个列表项的链接触发.

当前组件结构

我有一个顶级容器组件ListItemPage链接到Redux我用来维护列表的状态,然后我将更改推送到商店.

在ListItemPage中,我正在呈现项目列表,每个项目都有一个唯一的菜单组件

ListItemPage组件

class ListItemPage extends Component {
    constructor(props, context) {
        super(props, context);
    }

    onMenuClick(){}
    onRename(){}
    onDelete(){}

    render () {
        const { listItems } = this.props;

        return(
            <div>
                <ul>
                    {
                        listItems.map(listItem =>
                            <li>
                                <a href={`/items/${listItem.id}`}>
                                    {listItem.title}
                                </a>
                                <a href="#" onClick={onMenuClick}>
                                    <i className="material-icons">more_vert</i>
                                </a>
                                <Menu
                                    showMenu={showMenu}
                                    onRename={onRename}
                                    onDelete={onDelete}/>
                            </li>
                        )
                    } …

我正在使用Async Storage在我的本机应用程序中存储一些值.我有一个登录,所以当我登录到应用程序时,我正在存储我的ID,当我退出时我正在删除它.

但是当在没有注销的情况下卸载我的应用程序时,异步存储中的数据不会删除,这意味着在再次安装应用程序时会自动登录.

你可以告诉我如何解决这个问题在Android设备和版本> 6

谢谢.

我有一个简单的学生对象列表,其中包含姓名和状态分数.

他们的名字是必然的<b>{student.name}</b>,他们的分数是必然的

<input type="text" defaultValue={student.score}/>

什么时候我想从这个列表中删除第一个学生并通过调用set state重新渲染组件

第二个学生的输入标签显示第一个学生的分数而不是自己的分数.为什么这会发生在我做错的地方？

这里是我的代码,这里是jsbin中的mycode

class App extends React.Component{
  constructor(){
    super();
    this.state ={
      students:[{name:"A",score:10},{name:"B",score:20},{name:"C",score:30}]
    }
  }

  onDelete(index){
    this.state.students.splice(index,1);
    this.setState(this.state);
  }

   render(){
     return(
       <div>
         {this.state.students.map((student,index)=>{
              return(
                <div key={index}>
                    <b>{student.name}</b> - <input type="text" defaultValue={student.score}/>
                     <button onClick={this.onDelete.bind(this,index)}>delete</button>
                </div>                
              )
         })}
       </div>
     )
   }
}


ReactDOM.render(<App/>,document.getElementById("main"));

我已经成功地在我的应用程序中拍摄照片并将其存储在手机上,但我该如何显示它？

我试过这种静态方法,但它不起作用(是的,图像在那里:))

 <Image width={40} height={40} source={{uri: '/storage/emulated/0/DCIM/IMG_20161201_125218.jpg'}} />