根据道具长度反应样式宽度

Question

我有一个反应成分：

const TeamRow = props => {
  const items = props.team.map((item, index) => {
    const con_width = 100 / props.team.length;
    const Style = {
      team_img: {
        width: "50px",
        height: "auto"
      },
      member_container: {
        float: "left",
        width: `{con_width}%`
      }
    };
    return (
      <div style={Style.member_container}>
        <img style={Style.team_img} src={logo} />
        <p>{item.name}</p>
        <p>{item.bio}</p>
      </div>
    );
  });
  return <div>{items}</div>;
};

这个想法是使一组div水平相邻。每个div的宽度应等于100％除以div的数量。 {con_width}的计算正确，但是在Web检查器中根本没有“宽度”样式。它只是被反应忽略了。我在做什么错了？

Answer 1

更改

width: `{con_width}%` 

收件人

width: `${con_width}%`

您需要在模板文字中使用$ {}来打印值