如何将道具从父母到子女传递给孩子的孩子

Question

我想通过app.js（parent）将道具传递给commentitem.js（child）到button.js（儿童的孩子），但是道具在按钮中是空的，JS（儿童的孩子）的组件。

1. app.js（parent）to commentitem.js（child）

我将mainuser: this.state.head推到flatlist，而renderItem={({ item }) => <CommentItem {...item}

通过的道具（Mainuser）

和，commentitem.js（child）通过以下代码收到mainuser。

const {
    head,
    text,
    created,
    mainuser,
    subuser,
  } = 

2. commentitem.js（child）to button.js（儿童的孩子）

我以为道具被键入按钮，和按钮（儿童的孩子）通过以下代码收到道具。

const {
      mainuser,
    } = this.props;

但是，props id in button.js（儿童的孩子）。

＃我的代码有什么问题吗？你能提供一些建议吗？

---

app.js（parent）

export default class App extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {
      head: [],
      list: [],
    };
  }
  _onPress = (text) => {
    const list = [].concat(this.state.list);
   list.push({
      key: Date.now(),
      text: text,
      done: false,
      mainuser: this.state.head,
    });
    this.setState({
      list,
    });
  }
  render() {
    const {
      head,
      list,
    } = this.state;
    var data = [["User1", "User2", "User3"],];
    return (
      <View style={styles.container}>
        <View style={styles.dropdownHeader}>
        <View style={styles.dropdown}>
          <DropdownMenu
            style={{flex: 1}}
            bgColor={'white'}
            tintColor={'#666666'}
            activityTintColor={'green'}
            handler={(selection, row) => this.setState({head: data[selection][row]})}
            data={data}
          >
          </DropdownMenu>
        </View>
        </View>
      <Text>To Do</Text>
            <View style={styles.postinput}>
              <CommentInput onPress={this._onPress} />
            </View>
          </View>
          <View style={styles.CommentListContainer}>
            <FlatList
              /*inverted*/
              style={styles.CommentList}
              data={list}
              renderItem={({ item }) => <CommentItem {...item} /> }
            />
          </View>
    );
  }
}

commentitem.js（child）

const CommentItem = (props) => {
  const {
    head,
    text,
    created,
    mainuser,
    subuser,
  } = props;

  return (
    <View style={styles.container}>
      <View style={styles.left}>
        <Text style={styles.text}>{text}</Text>
      </View>
      <View style={styles.function}>
        <Button {...mainuser} />
      </View>
    </View>
  );
}

button.js（孩子的孩子）

export default class ApplauseButton extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    const {
      mainuser,
    } = this.props;
    return (
      <View style={styles.container}>
        <Text>{mainuser}</Text>
      </View>
    );
  }
}

Answer 1

如果要访问 mainuser作为道具，则您将其传递为<Button mainuser={mainuser} />。

就目前而言，您正在传播mainuser的内容。

Answer 2

根据您的代码，似乎主要用户是数组，

this.state = {
  head: [],//array
  list: [],
};
....
list.push({
      key: Date.now(),
      text: text,
      done: false,
      mainuser: this.state.head,// main user should be array
});

因此，您还需要在<Button />

中给出道具名称

喜欢这个

<Button mainuser={mainuser} />