Question

我在教自己p / react，我不确定为什么我无法访问组件的状态。

我有一个组件：

const AView = (state,props) => (
  <div>
    <p>{state.a}</p>
    <B />
  </div>
)

class A extends Component {
  constructor() {
    super();
    this.state = { a: 1 };
  }
  render(props,state) {
    return <AView a={state.a}/>
  }
}

const BView = (state,props) => (
  <div>
    <p>{state.b}</p>
  </div>
)

class B extends Component {
  constructor() {
    super();
    this.state = { b: 2 };
  }
  render(props,state) {
    return <BView b={state.b}/>
  }
}

这会使组件A呈现预期状态1，但它不会使组件B呈现状态2（组件B只是呈现为空<p>代码。）

但是，如果我使用替代语法，我可以使用状态B呈现组件2：

class B extends Component {
  ...
  render(props,state) {
    return BView(props,state);
  }
}

我在这里概念性地遗漏了一些东西，还是只有一些我不知道的语法？我试过谷歌搜索，但我真的不知道足够的术语来获得相关的搜索命中率。

Answer 1

不确定Preact。但我会尝试解决这个问题：

const AView = (props) => (
  <div>
    <p>{props.text}</p>
    <BView />
  </div>
)

class A extends Component {
  constructor() {
    super();
    this.state = { a: 1 };
  }
  render() {
    return <AView text={this.state.a} />
  }
}

const BView = (props) => (
  <div>
    <p>{props.text}</p>
  </div>
)

class B extends Component {
  constructor(props) {
    super(props);
    this.state = { b: 2 };
  }
  render() {
    return <BView text={this.state.b} />
  }
}

p / react：使用“tag”语法时无法访问状态

1 个答案: